React Context频繁更新导致子组件全部重新渲染的优化

React Context 是一个强大的状态管理工具，但只要 Context 中的值发生微小变化，所有消费该 Context 的子组件都会无条件重新渲染。在高频更新场景下（如鼠标移动、动画、表单输入），这会导致严重的性能卡顿。以下是几种经过验证的优化方案，按实施难度从低到高排列。

1. 拆分 Context：将“静态数据”与“动态数据”分离

如果一个 Context 对象中既包含基本不变的静态数据（如用户信息），又包含高频更新的动态数据（如当前选中的主题色或鼠标位置），动态数据的更新会拖累所有依赖静态数据的组件。

1. 检查 现有的 Context 定义，找出其中状态更新频率差异较大的属性。
2. 创建 两个或多个独立的 Context。例如，将 UserContext 和 ThemeContext 分开。
3. 修改 Provider 结构，将原本的单一 Provider 拆分为嵌套的多个 Provider。

代码示例：

// 优化前：所有数据混在一起，任何更新都会导致全部重渲染
const AppContext = React.createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null); // 变化频率低
  const [theme, setTheme] = useState('light'); // 变化频率高
  return (
    <AppContext.Provider value={{ user, theme, setTheme }}>
      {children}
    </AppContext.Provider>
  );
}

// 优化后：拆分为两个 Context
const UserContext = React.createContext();
const ThemeContext = React.createContext();

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

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

// 子组件按需消费
function UserProfile() {
  const { user } = useContext(UserContext);
  // 只有 user 变化时才重渲染，不受 theme 影响
  return <div>{user.name}</div>;
}

2. 稳定化 Context Value：使用 useMemo 阻止引用变动

即使 Context 中的值没有实际变化，每次 Provider 组件重新渲染时，value 属性传入的对象字面量都会生成一个新的内存引用。React 会认为引用变了，从而强制子组件更新。

1. 定位 Provider 组件中的 value 属性。
2. 包裹 value 属性的计算逻辑，使用 useMemo Hook 进行缓存。
3. 配置 依赖数组，确保只有当实际依赖的状态发生变化时，才生成新的对象引用。

代码示例：

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

  // 错误写法：每次渲染都创建新对象，导致所有子组件重渲染
  // <AppContext.Provider value={{ user, setUser, theme, setTheme }}>

  // 正确写法：使用 useMemo 缓存对象引用
  const value = useMemo(() => ({
    user,
    setUser,
    theme,
    setTheme
  }), [user, theme]); // 仅当 user 或 theme 真正变化时，value 才会改变

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

3. 细粒度订阅：使用 Selector 模式（进阶方案）

如果无法拆分 Context（例如状态是一个巨大的对象），可以使用“选择器”模式，让子组件只订阅对象中特定的部分。这通常需要借助第三方库 use-context-selector 来实现，因为原生的 useContext 不支持选择器。

1. 安装 use-context-selector 库。

npm install use-context-selector

2. 替换 原生的 createContext 和 useContext 为库提供的导入。

3. 修改 Provider 的实现，确保 Context 结构正确。

4. 更新 子组件，使用 useContextSelector 替代 useContext，并传入一个选择器函数。

代码示例：

import { createContext, useContextSelector } from 'use-context-selector';

const AppContext = createContext(null);

function AppProvider({ children }) {
  const [state, setState] = useState({ 
    count: 0, 
    name: 'Alice', 
    text: '...' // text 会频繁变化（如输入框）
  });

  return (
    <AppContext.Provider value={{ state, setState }}>
      {children}
    </AppContext.Provider>
  );
}

function ShowName() {
  // 即使 text 频繁变化，只要 name 不变，此组件就不会重渲染
  const name = useContextSelector(
    AppContext, 
    (context) => context.state.name
  );

  return <div>Name: {name}</div>;
}

4. 优化方案对比与选择

下表总结了不同方案的适用场景，请根据实际项目需求进行选择。

5. 数据流转逻辑

在优化后的架构中，Context 的更新路径变得更具针对性。下图展示了拆分 Context 或使用 Selector 模式后，数据更新与组件渲染的流向关系。

上图描述了以下逻辑：

1. StateChange 触发了 Provider 重渲染。
2. 由于 Component A 订阅了发生变化的数据（count），它会被标记为更新（蓝色实线）。
3. Component B 订阅了未变化的数据（name），且使用了优化手段（拆分或 Selector），因此它跳过了本次渲染（白色虚线）。