一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信。
a里面有b b有c，c有d。context适用于a和c，d的通信，a和b也可以用，但是用props更方便。

1. 基本使用

1) 创建Context容器对象：

  const XxxContext = React.createContext()



2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

  <xxxContext.Provider value={数据}>

    子组件

    </xxxContext.Provider>



3) 后代组件读取数据：



  //第一种方式:仅适用于类组件

    static contextType = xxxContext  // 声明接收context

    this.context // 读取context中的value数据



  //第二种方式: 函数组件与类组件都可以

    <xxxContext.Consumer>

      {

        value => ( // value就是context中的value数据

          要显示的内容
          return value

        )

      }

    </xxxContext.Consumer>

2.以前的方法

context.js

import { MyContext } from "./context";

ReactDOM.render(
    <MyContext.Provider value={{ name: "why", level: 99 }}>
      <App />
    </MyContext.Provider>
  document.getElementById("root")
);

后代组件中使用

import { MyContext } from "../../context";


import React, { Component } from "react";

export class Hello extends Component {
  static contextType = MyContext;
  render() {
    console.log(this.context); //{name: 'why', level: 99}
    return <div>{this.context.name}</div>;
  }
}
export default Hello;

或者

import { MyContext } from "../../context";

import React, { Component } from "react";

export class Hello extends Component {
  render() {
    return (
      <MyContext.Consumer>
        {(value) => {
          return <h2>{value.name}</h2>;
        }}
      </MyContext.Consumer>
    );
  }
}
export default Hello;

函数组件

import { MyContext } from "../../context";

import React, { memo } from "react";

const Hello = memo(() => {
  return (
    <MyContext.Consumer>
      {(vaule) => {
        return <h2>{vaule.name}</h2>;
      }}
    </MyContext.Consumer>
  );
});

export default Hello;

3.useContext的使用

import { MyContext } from "../../context";

import React, { memo, useContext } from "react";

const Hello = memo(() => {
  const my = useContext(MyContext);
  return (
    <h2>
      {my.name} + {my.level}
    </h2>
  );
});

export default Hello;

如果有两个的化

import { createContext } from "react";

const UserContext = createContext()
const ThemeContext = createContext()


export {
  UserContext,
  ThemeContext
}

import { UserContext, TokenContext } from "./12_自定义Hooks/context"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <UserContext.Provider value={{name: "why", level: 99}}>
    <TokenContext.Provider value={'coderwhy'}>
      <Provider store={store}>
        <App />
      </Provider>
    </TokenContext.Provider>
  </UserContext.Provider>
);

import React, { memo, useContext } from 'react'
import { UserContext, ThemeContext } from "./context"

const App = memo(() => {
  // 使用Context
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)

  return (
    <div>
      <h2>User: {user.name}-{user.level}</h2>
      <h2 style={{color: theme.color, fontSize: theme.size}}>Theme</h2>
    </div>
  )
})

export default App

4.注意

image.png

注意事项：
 当组件上层最近的 <MyContext.Provider>的数据发送更新时，该 Hook 会触发重新渲染，并使用最新传递给 MyContext provider 的context value 值。

现在 App组件依赖UerContext和ThemeContext，如果
当value={{name: "why", level: 99}
value={'coderwhy'}
发生变化的时候，App组件会重新渲染的。渲染以后，会从UerContext和ThemeContext里面拿去最新的数据，在对return里面的jsx做最新的渲染。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <UserContext.Provider value={{name: "why", level: 99}}>
    <TokenContext.Provider value={'coderwhy'}>
      <Provider store={store}>
        <App />
      </Provider>
    </TokenContext.Provider>
  </UserContext.Provider>
);


const user = useContext(UserContext)
 const theme = useContext(ThemeContext)