React 实用进阶合集（1）-阿里云开发者社区

React 实用进阶合集（1）

2022-09-16 113

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React 实用进阶合集（1）

`1、函数组件和class组件为什么会被区分开？`

概述部分需要学习哪些东西

网络异常，图片无法展示
|

网络异常，图片无法展示

函数组件为啥叫无状态组件？

网络异常，图片无法展示
|
函数组件总结一下？
为什么称之为 class 简化部分（当然函数组件功能可扩展）

网络异常，图片无法展示

`2、 React非受控组件 ?`

在哪使用？

网络异常，图片无法展示

举个例子

import React, { Component } from "react";
class UpFiles extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.fileInputRef = React.createRef();
  }
  alertName = () => {
    const elem = this.fileInputRef.current;
    alert(elem.files[0].name);
  };
  render() {
    return (
      <div>
        <input type="file" ref={this.fileInputRef} />
        <button onClick={this.alertName}>alert name</button>
      </div>
    );
  }
}
export default UpFiles;
复制代码

实现效果
非常nice 选择文件可打印出名字

网络异常，图片无法展示

`3、React Portals 在哪使用？`

怎么使用这个传送门？

网络异常，图片无法展示

举个例子说明这个情况 fixed 放在body第一层（root外层）

1、先常规来写不使用 portals

PortalsDemo.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
class PortalsDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div
        style={{
          position: "fixed",
          left: "300px",
          top: "300px",
          width: "200px",
          height: "200px",
          backgroundColor: "pink",
        }}
      >
        {this.props.children}
      </div>
    );
  }
}
export default PortalsDemo;
复制代码

index.jsfixed 内容区域
页面效果在 root内

网络异常，图片无法展示

2、使用 portals 试试

import React, { Component } from "react";
import ReactDOM from "react-dom";
class PortalsDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    // return (
    //   <div
    //     style={{
    //       position: "fixed",
    //       left: "300px",
    //       top: "300px",
    //       width: "200px",
    //       height: "200px",
    //       backgroundColor: "pink",
    //     }}
    //   >
    //     {this.props.children}
    //   </div>
    // );
    //使用 portals 放在body上 root外
    return ReactDOM.createPortal(
      <div
        style={{
          position: "fixed",
          left: "300px",
          top: "300px",
          backgroundColor: "pink",
        }}
      >
        {this.props.children}
      </div>,
      document.body
    );
  }
}
export default PortalsDemo;
复制代码

查看当前页面结构 明显可以看到逃离了 id='root'

网络异常，图片无法展示

`4、React Context ？`

网络异常，图片无法展示

使用步骤

1、使用 React.createContext 创建context 并写默认值
2、使用 ThemeContext.Provider 包裹需要使用数据的子组件 并传值 value={this.state.theme}
3、函数组件使用 ThemeContext.Consumer 消费数据 
4、class子组件 消费数据先定义 contextType 然后取值 this.context
5、完成多层级传递 
复制代码

层级展示

网络异常，图片无法展示

完整代码展示

import React, { Component } from "react";
//创建context  并传入默认值
const ThemeContext = React.createContext("light");
// 函数组件使用 ThemeContext.Consumer 消费数据
function ThemeLink(props) {
  return (
    <ThemeContext.Consumer>
      {(value) => <p>link's theme is {value}</p>}
    </ThemeContext.Consumer>
  );
}
// class子组件 消费数据先定义 contextType 然后取值 this.context
class ThemeButton extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const theme = this.context;
    return (
      <div>
        <p>button's theme is {theme}</p>
      </div>
    );
  }
}
ThemeButton.contextType = ThemeContext;
function Tooolbar() {
  return (
    <div>
      <ThemeButton />
      <ThemeLink />
    </div>
  );
}
class Context extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: "light",
    };
  }
  changeTheme = () => {
    this.setState({
      theme: this.state.theme === "light" ? "dark" : "light",
    });
  };
  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        <Tooolbar />
        <hr />
        <button onClick={this.changeTheme}>change the theme</button>
      </ThemeContext.Provider>
    );
  }
}
export default Context;
复制代码