React 的context操作指南

用途

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

API

React.createContext

const MyContext = React.createContext(defaultValue);

Context.Provider

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

Class.contextType

MyClass.contextType = MyContext;

Context.Consumer
这里，React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context。

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

Context.displayName

MyContext.displayName = 'MyDisplayName';

警告

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