介绍

Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差

API

React.createContext

const MyContext = React.createContext(defaultValue);

使用此API可以创建一个Context对象，组件会从最近的Provider中读取对应的值。只有当组件所处的树种不存在Provider时，defaultValue参数才会生效

Context.Provider

<MyContext.Provider value={某个值}/>

Context对象会返回一个Provider组件

Provider接受一个value属性，传递给消费组件
当Provider的value属性值更变时，内部的所有消费组件都会重新渲染
context会根据引用标识进行重新渲染，所以当向value传递一个对象时，需要注意：当Provider重新渲染时，可能会触发Consumer意外渲染。为了防止这种情况，将value状态提升到父节点的state中

Context.Consumer

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

Context对象会返回一个Consumer组件

需要一个函数作为子元素，函数接收context值，返回一个React节点
传递给函数的value值等价于组件树上方离这个context最近的Provider提供的value值。如果没有对应的Provider，value参数等同于传递给 createContext()的defaultValue

Class.contextType

此属性可以让你使用this.context来获取最近Context上的值。你可以在任何生命周期中访问到它，包括render函数中

const MyContext = React.createContext()
class MyClass extends React.Component {
    
    
  render() {
    
    
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}
MyClass.contextType = MyContext

同时，你也可以使用实验性的public class fields语法中的static类属性初始化contextType

const MyContext = React.createContext()
class MyClass extends React.Component {
    
    
  static contextType = MyContext
  render() {
    
    
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

Context.displayName

context对象接受一个名为displayName的property，React DevTools 使用该字符串来确定context要显示的内容

React学习笔记 - Context