React Context作用和使用

1. Context

React中的Context提供了一个层级组件中共享数据的方法，避免了在每一个层级中手动传递props属性,寻找传递的数据最初值是多

2. API

React.createContext : 创建一个上下文的容器(组件),可以在createContext传入共享的默认数据

const {Provider, Consumer} = React.createContext("默认数据");

Provider(生产者) : 产生共享数据的地方,value传入什么值，就共享什么数据

<Provider value={/*共享的数据*/}>
    /*里面可以渲染对应的内容*/
</Provider>

Consumer(游客/消费者): 数据的使用者,可以拿到上层组件传入的数据,Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。可以单独使用 只能拿到默认值

<Consumer>
  {(value) => /*根据上下文  进行渲染相应内容*/}
</Consumer>

3. 项目中具体使用

App.js组件(父组件)

export const { Provider,Consumer } = React.createContext("默认值");

  render() {
    const child = "共享数据";
    return (
      <div>
        <Provider value={child}>
          <h1>父组件中定义的值:{child}</h1>
          <Child></Child>
        </Provider>
      </div>
    );
  }

Child.js (子组件)

import { Consumer } from "../../App.js";  //导入父组件中的Consumer容器

 <Consumer>{(child) => <h1>获取父组件的值:{child}</h1>}</Consumer>

多层组件数据一样共享