react特性之context

222 阅读1分钟
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。


1.React.createContext:创建一个 Context 对象。


当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。 只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。

注意:将 undefined 传递给 Provider 时,消费组件的 defaultValue 不会生效。

 2.Context.Provider:每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化。   


Provider 接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。 当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数,因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

 3.Class.contextType :挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。

可以在任何生命周期中访问到this.context 来消费最近 Context 上的那个值,包括 render 函数中。

 4.Context.Consumer 这个函数接收当前的 context 值,返回一个 React 节点。