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

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

@@ -50,4 +50,14 @@ Consumer 是函数式组件订阅 Context 的方法。
 const value = useContext(MyContext);
 ```
 
-useContext 接受一个 Context 对象，并返回该 Context 的当前值，和 contextType 中相同，Context 上的值由最近的 Provider 决定，当组件最上层的 Provid
+useContext 接受一个 Context 对象，并返回该 Context 的当前值，和 contextType 中相同，Context 上的值由最近的 Provider 决定，当组件最上层的 Provider 更新时，该 Hook 会触发重新渲染，并使用最新传递的 value，且无视上层父组件使用了 React.memo，也就是说使用了 useContext 的组件总会在 context 值变化的时候重新渲染。
+如果重新渲染组件的开销较大，可以将组件放在 useMemo 中来优化
+
+```javascript
+return useMemo(() => {
+	const appContextValue = useContext(AppContext);
+	return <ExpensiveTree className={appContextValue.theme} />;
+}, [theme])
+```
+
+useContext Hook 相当于 class 组件中 Class.contextType / Context.Consumer，但是对于函数式组件，提供了更加优雅的 Context 使用方案，但是只是提供了Context 的