React-13 Context

作用

• Context提供了一个无需为每层组件手动添加props，就能在组件之间进行数据传递的方法，从而避免了在每一个层级手动的传递 props 属性。

目的

• 共享那些对于一个组件树而言是全局的数据

应用场景

• 很多不同层级的组件需要访问一些同样的数据

数据流对比

• props逐层传递

• React Context加入后 跳级传递状态

图片来源

React.createContext

• 创建一个上下文的容器(组件)
• defaultValue: 设置共享的默认数据

const {Provider, Consumer} = React.createContext(defaultValue);

useContext

const context = useContext(MyContext);
return <h1> {context} </h1>

Provider

• 作用：生产共享数据
• value： 存放共享数据

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

Consumer

• 作用：消费Provider产生的数据
• 位置： 嵌套在Provider下面，通过回调方式拿到共享数据

<MyContext.Consumer>
  /*根据上下文  进行渲染相应内容*/}
  {value => {
    <h1>
      the value props passed from Provider was{value}
    </h1>
  }}
</MyContext.Consumer>

上文参考

注意

• 如果需要修改Context的值，应该统一由Provider修改
• 谨慎使用，因为这会让组件复用性变差