React Context 拆分怎么避免整棵树重渲染？

Question

仓乃文 · Accepted Answer

Context 的值变化时，所有消费该 Context 的组件都会重渲染，即使只用了其中一个字段。拆分 Context 让每个组件只订阅它需要的数据，避免无关变化触发渲染。问题场景： ```javascript const AppContext = createContext({ user: null, theme: "light", locale: "zh" }); // user 变化时，只用 theme 的组件也跟着渲染 function ThemeToggle() { const { theme } = useContext(AppContext); // 订阅了整个 context return ; } ``` 拆分 Context： ```javascript const UserContext = createContext(null); const ThemeContext = createContext("light"); const LocaleContext = createContext("zh"); function ThemeToggle() { const theme = useContext(ThemeContext); // 只订阅 theme return ; // user 变化不会触发渲染 } ``` 拆分读写 Context（更精细）： ```javascript const ThemeStateContext = createContext("light"); // 只读 const ThemeDispatchContext = createContext(null); // 只写 function ThemeToggle() { const theme = useContext(ThemeStateContext); // 只订阅 state // dispatch 变化不会触发重渲染 return ; } ``` 补充说明： - 拆分粒度越细，重渲染范围越小，但 Context 数量增多 - 读写拆分适合 dispatch 函数从不变化的场景（如 useReducer 的 dispatch） - 也可以用 useMemo 缓存 context value 避免父组件渲染导致的 context 值变化 - 大型应用考虑 Zustand/Jotai 等细粒度订阅的状态库替代 Context