react---context上下文（跨组件之间传参）持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

==context在react---function中的用法--静态数据==

重点代码：
	  const mainContext = React.createContext();
      const { Provider } = mainContext;
      
      const c = React.useContext(mainContext);  // 写在组件内部

 <title>context-2</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const mainContext = React.createContext();
      const { Provider } = mainContext;
      function B() {
        // useContext可以获取当前组件的上下文内容
        const c = React.useContext(mainContext); // B组件会出现context，从而调取全局数据
        console.log(c);
        return (
          <>
            <h1>我是组件B</h1>
          </>
        );
      }

      function App() {
        return (
          <>
            <B />
          </>
        );
      }

      ReactDOM.render(
        <Provider value={{ title: "我是一个标题", color: "orange" }}>
          <App />
        </Provider>,
        document.getElementById("app")
      );
    </script>
  </body>

==context在react-class中的用法---静态数据==

重点代码：
  const mainContext = React.createContext();  
  const { Provider } = mainContext;

  B.contextType = mainContext;    // 写在组件外部
  static contextType = mainContext;     // 写在组件内部

在这里插入图片描述

    <title>context</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const mainContext = React.createContext();
      const { Provider } = mainContext;
      class B extends React.Component {
        constructor(props) {
          super(props);
          this.state = {};
        }
        render() {
          // 用谷歌react插件，可以发现B组件中存在context与props同级，使用context来做一个全局的数据处理
          console.log(this.context); //  打印的是Provider标签中的value的值
          return (
            <>
              <h1>我是组件B</h1>
            </>
          );
        }
      }
      B.contextType = mainContext; // 第一种写法  此时B组件会出现context值

      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {};
        }
        static contextType = mainContext; // 第二种写法（全局静态变量）  此时App组件会出现context值
        render() {
          return (
            <>
              <B />
            </>
          );
        }
      }

      ReactDOM.render(
        <Provider value={{ title: "我是一个标题", color: "orange" }}>
          <App />
        </Provider>,
        document.getElementById("app")
      );
    </script>
  </body>

react----context上下文数据动态改变操作

在这里插入图片描述

    <title>context-2</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const mainContext = React.createContext();
      const { Provider } = mainContext;
      function B() {
        // useContext可以获取当前组件的上下文内容
        const { counter } = React.useContext(mainContext);
        // console.log(c);
        return (
          <>
            <h1 onClick={() => counter.setCount(counter.count + 1)}>
              我是组件B
            </h1>
          </>
        );
      }

      function App(props) {
        const { counter } = React.useContext(mainContext);
        return (
          <>
            <h1>当前的count值为:{counter.count}</h1>
            <B />
            {props.children}
          </>
        );
      }

      //  组件内部的{props.children} 是必须存在的
      function AppProvider(props) {
        const [count, setCount] = React.useState(0); // 创建的局部状态
        return (
          // 动态的传递全局数据，counter可变，这样写是更加有条理性
          <Provider value={{ counter: { count, setCount } }}>
            {props.children}
          </Provider>
        );
      }

      ReactDOM.render(
        <AppProvider>
          <App />
        </AppProvider>,
        document.getElementById("app")
      );
    </script>
  </body>