React.Context 的应用

Context

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

image.png

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

function F1() {
  return (
    

      111 {" "}
    
  );
}

function F2() {
  return (
    

      222 {" "}
    
  );
}

function F3() {
  return (
    

      333
      {/* Consumer包围，进行接收传递的参数 */}
      
        {/* 传递的参数以函数形式进行传递 */}
        {x => }
      
    
  );
}

function F4(props) {
  return (
    

      444,
      {props.n4}
      CLICK ME
      {/* 若想在子组件中修改数据，需要在父组件中传递修改函数 */}
    
  );
}

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 (
      

        {/* 用Context.Provider包围，可隐性将state层层传递下去 */}
        
          
        
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

本例
文档