Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法

image.png

import React from "react";
import ReactDOM from "react-dom";

function F1() {
  return (
    <div className="red">
      111 <F2 />{" "}
    </div>
  );
}

function F2() {
  return (
    <div className="red">
      222 <F3 />{" "}
    </div>
  );
}

function F3() {
  return (
    <div className="red">
      333
      {/* Consumer包围，进行接收传递的参数 */}
      <nContexst.Consumer>
        {/* 传递的参数以函数形式进行传递 */}
        {x => <F4 n4={x.n} setN={x.setN} />}
      </nContexst.Consumer>
    </div>
  );
}

function F4(props) {
  return (
    <div className="red">
      444,
      {props.n4}
      <button onClick={props.setN}>CLICK ME</button>
      {/* 若想在子组件中修改数据，需要在父组件中传递修改函数 */}
    </div>
  );
}

const nContexst = React.createContext();

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      x: {
        n: 67,
        setN: () => {
          this.setState({
            x: {
              ...this.state.x,
              // 保留state的数据，... 拓展保留项，以免setState时重新指向，删除setN函数
              n: this.state.x.n + 1
            }
          });
          console.log("执行完毕");
        }
      }
    };
  }

  render() {
    return (
      <div className="App">
        {/* 用Context.Provider包围，可隐性将state层层传递下去 */}
        <nContexst.Provider value={this.state.x}>
          <F1 />
        </nContexst.Provider>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

本例
文档