React 中 Context 导致的不必要重渲染

jsx const AppContext = React.createContext();

function AppProvider({ children }) { const [user, setUser] = useState(null); const [theme, setTheme] = useState('light');

// 每次 AppProvider 渲染，都会生成全新对象 const value = { user, setUser, theme, setTheme }; return <AppContext.Provider value={value}>{children}</AppContext.Provider>; }

// 只关心 theme 的组件 function ThemeButton() { const { theme, setTheme } = useContext(AppContext); console.log('ThemeButton 渲染了'); return ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> 当前主题：{theme} ); }

// 只关心 user 的组件 function UserProfile() { const { user } = useContext(AppContext); console.log('UserProfile 渲染了'); return

当你调用 `setTheme` 更新主题时，不只 `ThemeButton` 会重渲染，**`UserProfile` 也会跟着重渲染**，尽管它所消费的 `user` 根本没有变化。这就是 Context 导致的不必要重渲染。

### 如何精准定位由 Context 引发的不必要渲染

在优化之前，需要确认哪些组件确实被“误伤”了。

- **React DevTools Profiler**  
  使用 React 开发者工具中的 Profiler 录制一次交互，观察 Flamegraph 或 Ranked 视图，找出那些在预期之外被高亮的组件。被高亮意味着它们实际执行了渲染。
- **自定义 Hook 添加渲染日志**  
  在 `useContext` 调用处添加 `useEffect` 或简单的 `console.count` 来追踪组件渲染次数和触发时机。
- **为什么 `React.memo` 常常失效？**  
  即使你用 `React.memo` 包裹组件，只要它内部使用了 `useContext`，当 Context 值变化时组件仍会重渲染。`React.memo` 只对 props 做浅比较，但 Context 的变化会绕过这种比较，强制更新。

### 有效优化方案：从拆分 Context 到精确订阅

#### 方案一：将 Context 拆分为更小的领域 Context

最直接有效的方法就是把一个巨大的 Context 拆分成多个独立的小 Context，每个 Context 只管理一组强相关的状态。这样，更新 `theme` 只会通知 `ThemeContext` 的消费者，而不会影响到 `UserContext` 的消费者。

```jsx
const ThemeContext = React.createContext();
const UserContext = React.createContext();

function AppProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        {children}
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  // 仅 theme 变化时重渲染
}

function UserProfile() {
  const { user } = useContext(UserContext);
  // 仅 user 变化时重渲染
}

适用场景：状态可以被清晰地划分到不同领域，并且大部分组件只需要消费其中一个领域的值。

方案二：拆分“数据”与“更新函数”

很多时候，状态（如 user）变化频繁，但更新函数（如 setUser）引用是稳定的。如果某个组件只需要调用更新函数而不需要读取状态，可以将它们放在不同的 Context 中，避免因状态改变导致该组件不必要渲染。

const UserStateContext = React.createContext();
const UserDispatchContext = React.createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserStateContext.Provider value={user}>
      <UserDispatchContext.Provider value={setUser}>
        {children}
      </UserDispatchContext.Provider>
    </UserStateContext.Provider>
  );
}

// 仅需要更新用户状态的组件（不会因 user 值变化而重渲染）
function LogoutButton() {
  const setUser = useContext(UserDispatchContext);
  return <button onClick={() => setUser(null)}>退出登录</button>;
}

方案三：使用 useMemo 和 React.memo 配合“选择器”模式

如果你不能随意拆分 Context（例如处于大型项目或需要向后兼容），可以使用“选择器”模式，让组件自行从 Context 中提取所需的部分，并在提取结果未变化时跳过渲染。

function useSelector(selector) {
  const contextValue = useContext(AppContext);
  // 只有当 selector 返回的值发生变化时才引发更新
  const selected = selector(contextValue);
  const [prevSelected, setPrevSelected] = useState(selected);
  const [memoSelected, setMemoSelected] = useState(selected);

  if (!Object.is(prevSelected, selected)) {
    setPrevSelected(selected);
    // 通过微任务或 useEffect 确保渲染在安全阶段触发
    Promise.resolve().then(() => setMemoSelected(selected));
  }
  return memoSelected;
}

function UserProfile() {
  const user = useSelector((c) => c.user);
  return <div>欢迎，{user?.name}</div>;
}

不过这种实现手法比较复杂，且容易引起并发模式下的问题。更推荐直接使用成熟的状态管理库。

方案四：引入外部状态管理库

当 Context 优化变得棘手时，转向专门的状态管理库通常是更稳健的选择。以 Zustand 为例，它可以做到极细粒度的订阅，组件只会在其所选择的状态片段变化时重渲染：

import { create } from 'zustand';

const useStore = create((set) => ({
  user: null,
  theme: 'light',
  setUser: (user) => set({ user }),
  setTheme: (theme) => set({ theme }),
}));

function ThemeButton() {
  const theme = useStore((s) => s.theme);
  const setTheme = useStore((s) => s.setTheme);
  // 仅在 theme 变化时重渲染
}

function UserProfile() {
  const user = useStore((s) => s.user);
  // 仅在 user 变化时重渲染
}

其他可选的轻量级方案还有 Jotai、Valtio，或 React 官方推荐的 useReducer + Context（仍需配合拆分）。

避免写 Context 时的常见陷阱

• 不要在 Provider value 中直接使用对象字面量
  即使使用了拆分后的 Context，若 Provider 每次渲染都创建新对象，仍可能破坏子组件的 React.memo 优化。应使用 useMemo 包裹 value。

  const themeValue = useMemo(() => ({ theme, setTheme }), [theme]);
  <ThemeContext.Provider value={themeValue}>