React-Context

Context

Context定义：

• Context：提供了一种在组件之间共享值的方式，使得我们无需每层添加props或传递组件，就能实现在组件树中传递数据

Context使用方式：

• 1. React.createContext

  <!-- 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中 离自身最近 的那个匹配的 Provider 中读取到当前的 context 值。 -->
  const LocaleContext = React.createContext(defaultValue);
  

• 2. Context.Provider

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

  • Provider 接收一个 value 属性，传递给消费组件
  • 一个 Provider 可以和 多个消费组件 有对应关系。多个 Provider 可以 嵌套使用 ，里层的会覆盖外层的数据
  • 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会 重新渲染
  • Provider 及其内部 consumer 组件都 不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新
  • 通过新旧值检测来确定变化，使用了与 Object.is （Object.is MDN） 相同的算法

• 3-1. Class.contextType

  // 挂载在 SubComponent 上的 contextType 属性会被重赋值为 LocaleContext
  SubComponent.contextType = LocaleContext;
  // 使用 this.context 来消费最近 Context 上的那个值
  let value = this.context;
  
  // 你可以使用这种方式来获取 context value，也可以使用 Context.Consumer 函数式订阅获取
  

• 3-2. Context.Consumer

  // 在函数式组件中完成订阅 context
  <LocaleContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
  </LocaleContext.Consumer>