React （精读官方文档）-高级指引 - Context

Context

一、概述

• Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
• 如果多个组件中都需要这个值 或者 获取值和使用值的层级相隔很远，就可以使用Context(上下文)来共享数据。
• 如：地区偏好，UI 主题、当前认证的用户、语言等
• 谨慎使用，这会使组件的复用性变差

二、API

React.createContext

 const MyContext = React.createContext（defaultValue）

• 创建一个 Context 对象
• 提供一个默认值，只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效

Context.Provider

  const MyContext = React.createContext（defaultValue）
  <MyContext.Provider value={
   xxx}> ... </MyContext.Provider>

• 每个 Context 对象都会返回一个 Provider React 组件
• Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以对应多个消费组件。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
• value 值发生变化时，它内部的所有消费组件都会重新渲染

Class.contextType

class MyClass extends React.Component {
   
  componentDidMount() {
   
    let value = this.context;
    /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
   
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
   
    let value = this.context;
    /* ... */
  }
  render() {
   
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;

• 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象
• 可以在任意生命周期中访问

Context.Consumer

<MyContext.Consumer>
   {
   value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

• 消费组件(子组件)中使用value
• 函数作为子元素；这个函数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。

Context.displayName

const MyContext = React.createContext()
MyContext.disp