React学习笔记 - Context
介绍
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
要显示的内容