类组件

使用 createContext 创建 context

const AppContext = createContext();
const App = (props) => {
    return (
      <AppContext.Provider value="data">
        <Middle />
    </AppContext.Provider>
  )
}
const Middle = (props) => {
    return (
      <>
        <Foo />
      <Bar />
      <Baz />
    </>
  )
}

1. 使用 context.Consumer 以函数参数接收 provider 的 value，函数回调进行渲染

   class Foo extends Component {
    render() {
      return (
        <AppContext.Consumer>
        { value => <div>{value}</div> }
      </AppContext.Consumer>
    )
   }
   }

2. 类组件也可以使用 contextType = 上下文对象

   class Bar extends Component {
   static contextType = AppContext;
    render() {
    const value = this.context;
      return (
         <div>{value}</div>
    )
   }
   }

   这两种方法都是基于类组件的 this 指向的实例

   函数组件

   useContext
   参数为 createContext 出来的 context 对象

   const Baz = (props) => {
    const value = useContext(AppContext);
   return (
      <div>{value}</div>
   )
   }