vault backup: 2022-03-29 16:24:34

随时随地/简单的 React 思考 - Context.md

@@ -2,7 +2,8 @@
 关于 React 中 Context 作为状态管理工具的思考具体可以这一篇 [[React 状态管理工具的简单思考]]
 这里主要是对 Context API 的简单记录
 
-### React.createContext
+
+### React.createContext / Context.Provider
 ```javascript
 const MyContext = React.createContext(defaultValue)
 ```
@@ -17,6 +18,8 @@ createContext 会创建一个 Context 对象，每个 Context 对象都会返回
 多个 Provider 可以嵌套使用，里层的会覆盖外层的数据。
 当 Provider 中的 value 值发生变化时，它内部的所有消费组件也就是子组件都会重新渲染，这个用于判断值是否发生变化的方法和 Object.is 使用了同样的算法， 也就是说如果 value 是一个引用类型，可能会导致一些意外的问题。
 
+
+### Class.contextType / Context.Consumer
 在 Hook 之前，在 React 组件中使用和消费 Context 的值可以使用 contextType 和 Consumer。
 
 ```javascript
@@ -38,4 +41,13 @@ contextType 属性可以让类组件使用 this.context 来获取 **最近**的
 ```
 
 Consumer 是函数式组件订阅 Context 的方法。
-之前说了，contextType 和 Consumer 都是在 Hook 出现之前订阅和消费 
+
+
+### Hook
+之前说了，contextType 和 Consumer 都是在 Hook 出现之前订阅和消费 Context 的方法，那么在 Hook 出现之后，函数式组件自然也有了 Hook 的方法用于消费 Context
+
+```javascript
+const value = useContext(MyContext);
+```
+
+useContext 接受一个 Context 对象，并返回该 Context 的当前值，和 contextType 中相同，Context 上的值由最近的 Provider 决定，当组件最上层的 Provid