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