From 7c29e242d2aaab2671a198eb4290e927aa0863af Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 29 Mar 2022 16:29:34 +0800 Subject: [PATCH] vault backup: 2022-03-29 16:29:34 --- 随时随地/简单的 React 思考 - Context.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) 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