react-context

首先，context 用于跨组件间的通信，避免了显式的逐层传递数据，只需要提供者提供数据，哪个组件使用那么哪个组件声明要使用提供的数据即可，所以如果不声明要使用那么不会得到提供的数据

1. 单独新建一个文件context.js

import React from "react";
const myContext = React.createContext(); // 创建 context 对象
export default myContext;

2. 给予者提供数据，一般在相对根组件，或者祖组件，这里以App.jsx为例 这里的嵌套关系为 App -> ComA -> Child

import React from "react";
import MyContext from "./context"; // 导入自己定义好的 context 对象
import ComA from "./page/ComA"; // 导入 App 的 子组件 ComA

const App = () => {
  // 假设费劲力气得来的数据，要传递给孙子，重孙等用，不想麻烦父亲
  const userinfo = {
    name: "zs",
    age: 18,
    gender: "female",
    class: "1024",
    phone: "12345678910",
  };
  return (
    <MyContext.Provider value={userinfo}> {/* 提供自己有的数据给后代 */}
      <div>App.</div>
      <ComA />
    </MyContext.Provider>
  );
};

export default App;

省略在 ComA 组件中导入 Child 组件

3. 消费者使用提供的数据，一般在孙子组件即更孙子的组件，这里以Child.jsx为例 这里可以分为三种形式，①函数式组件可用，②类组件可用，③函数式组件和类组件都可用

①函数式组件使用方式

import React, { useContext } from 'react';
import MyContext from '../context'; // 导入自己定义好的 context 对象

const ComB = () => {
    const { phone } = useContext(MyContext) // 使用 useContext() 方法返回 提供的数据
    return (
        <div>
            ComB.
            <p>手机号：{phone}</p>
        </div>
    );
}

export default ComB;

②类组件使用方式

import React, { Component } from "react";
import MyContext from "../context"; // 导入自己定义好的 context 对象

class Child extends Component {
  static contextType = MyContext; // 声明 我要使用 context 提供的数据 了
  render() {
    return (
      <div>
        Child.
        <p>姓名：{this.context.name}</p> {/* 使用 this.context 获取 数据 */}
      </div>
    );
  }
}

export default Child;

③函数式组件和类组件都可用使用方式

import React from "react";
import MyContext from "../context"; // 导入自己定义好的 context 对象

const Child = () => {
  return (
    <div>
      Child.
      <MyContext.Consumer> {/* 使用 MyContext.Consumer 包裹，然后写一个函数 value => {}，它的参数 value 就是 提供的数据 */}
        {value => {
          return (
            <div>
              <p>年龄：{value.age}</p>
            </div>
          );
        }}
      </MyContext.Consumer>
    </div>
  );
};

export default Child;