diff --git a/随时随地/简单的 React 思考 - Context.md b/随时随地/简单的 React 思考 - Context.md index 5243b88..68f92e9 100644 --- a/随时随地/简单的 React 思考 - Context.md +++ b/随时随地/简单的 React 思考 - Context.md @@ -15,8 +15,9 @@ createContext 会创建一个 Context 对象,每个 Context 对象都会返回 订阅了 Context 的组件会在组件树中查找离自己最近的 Provider 中读取到 Context 值也就是 Provider 中的 value 属性,只有在找不到 Provider 时,createContext 中的 defaultValue 参数才会生效,但是将 underfined 传递给 Provider 的时候,defaultValue 并不会生效。 多个 Provider 可以嵌套使用,里层的会覆盖外层的数据。 -当 Provider 中的 value 值发生变化时,它内部的所有消费组件也就是子组件都会重新渲染,这个用于判断值是否发生变化的方法和 Object.is 使用了同样的算法, 也就是说如果 value 是一个引用类型,可能会导致一些意外的问题 -在 Hook 之前,在 React Class 组件中使用和消费 Context 的值可以使用 contextType 和 Consumer。 +当 Provider 中的 value 值发生变化时,它内部的所有消费组件也就是子组件都会重新渲染,这个用于判断值是否发生变化的方法和 Object.is 使用了同样的算法, 也就是说如果 value 是一个引用类型,可能会导致一些意外的问题。 + +在 Hook 之前,在 React 组件中使用和消费 Context 的值可以使用 contextType 和 Consumer。 ```javascript class MyClass extends React.Component { @@ -24,8 +25,17 @@ class MyClass extends React.Component { const value = this.context; } }; + MyClass.contextType = MyContext; ``` contextType 属性可以让类组件使用 this.context 来获取 **最近**的 Context 上的值,并且可以在任何生命周期中访问到它 +```javascript + + { value => /* 基于 context 值进行渲染*/ } + +``` + +Consumer 是函数式组件订阅 Context 的方法。 +之前说了,contextType 和 Consumer 都是在 Hook 出现之前订阅和消费