使用useReducer与Context的性能影响探究（React最新版本）

首先直接说结论：这种组合确实可能引发不必要的组件重渲染，但并非在所有场景下都构成性能问题，关键看你怎么用。

为什么会出现性能问题？ #

你看到的文章说法是对的：

• useReducer 每次 dispatch 都会通过纯函数返回全新的状态对象（不会修改原状态）。
• Context 的机制是：只要 Provider 的 value 发生引用变化，所有订阅该 Context 的组件都会无条件重渲染——哪怕组件只用到了 Context 里某一小部分状态，其他无关状态变化也会触发它重渲染。

这就导致如果你的 Context 里包含了大量状态，只要其中任何一个字段更新，所有订阅组件都会跟着重新渲染，确实会造成不必要的性能开销。

为什么官方文档没提这个问题？ #

React 官方那篇文档的定位是入门级的架构扩展教程，核心是教你怎么用 reducer+Context 替代组件层层传 props，重点在“架构实现”而非“性能优化”。很多小型应用或者状态变更不频繁的场景下，这种基础用法的性能开销微乎其微，完全在可接受范围内，所以官方没必要在入门教程里提前抛出优化细节，避免增加初学者的理解负担。

怎么解决这个问题？ #

如果你的应用确实遇到了这类性能瓶颈，可以试试这几个方案：

• 拆分 Context：把大的全局状态拆分成多个粒度更细的 Context。比如把用户信息、主题配置、购物车状态分别做成独立的 Context，这样只有用到对应 Context 的组件才会在相关状态变化时重渲染。
• 用 React.memo 优化组件：给订阅 Context 的组件套一层 React.memo，再配合自定义的依赖判断——让组件只在自己实际用到的状态字段变化时才重渲染。
• 缓存 Context 的 value：如果你的 Context value 是一个对象（比如包含 state 和 dispatch），每次 Provider 渲染时都会新建这个对象，导致 Context 认为 value 变化触发重渲染。可以用 useMemo 把 value 缓存起来，只有当依赖的状态真正变化时才更新：

const AppContext = createContext();

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);
  // 缓存value，仅当state变化时重新生成
  const contextValue = useMemo(() => ({ state, dispatch }), [state]);
  return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>;
}

最后总结 #

• 小型应用、状态变更不频繁的场景：直接用 reducer+Context 完全没问题，不用纠结性能。
• 大型应用、状态变更频繁且出现性能瓶颈：再针对性地做上述优化即可。

内容的提问来源于stack exchange，提问作者Zlatan Sadibasic