如何拆分React Context API数据以避免无关组件重渲染

方案一：拆分多个独立Context #

按功能模块拆分状态，为每个模块创建单独的Context，让组件只订阅自己依赖的Context，状态变化时仅影响相关组件。

1. 创建拆分后的Context

在Parent.tsx中，针对不同模块的状态分别定义Context：

import { createContext, RefObject, Dispatch, SetStateAction } from 'react';

// 文本域相关Context
export const TextareaContext = createContext<{
  ref: RefObject<HTMLTextAreaElement>,
  editing: boolean,
  updateEditing: Dispatch<SetStateAction<boolean>>,
  value: string,
  updateValue: Dispatch<SetStateAction<string>>
}>({} as any);

// 菜单相关Context（修正原代码笔误：重复的updateShowIterate改为updateShowActions）
export const MenuContext = createContext<{
  showIterate: boolean,
  updateShowIterate: Dispatch<SetStateAction<boolean>>,
  showActions: boolean,
  updateShowActions: Dispatch<SetStateAction<boolean>>
}>({} as any);

// ID相关Context
export const IdContext = createContext<string>('');

2. 嵌套提供Context

在Parent组件中，为每个Context提供对应的值：

return (
  <IdContext.Provider value={state.id}>
    <MenuContext.Provider value={state.menu}>
      <TextareaContext.Provider value={state.textarea}>
        <Menu />
        <Textarea />
        <Data />
      </TextareaContext.Provider>
    </MenuContext.Provider>
  </IdContext.Provider>
);

3. 组件订阅对应Context

以Menu组件为例，仅订阅MenuContext：

import { useContext } from 'react';
import { MenuContext } from './Parent';

const Menu = () => {
  const { showIterate, updateShowIterate, showActions, updateShowActions } = useContext(MenuContext);
  
  // 菜单业务逻辑
  return (
    <div>
      <button onClick={() => updateShowIterate(prev => !prev)}>
        {showIterate ? '隐藏迭代' : '显示迭代'}
      </button>
      {/* 其他菜单元素 */}
    </div>
  );
};

此时menu模块的状态变化只会触发Menu组件重渲染，Textarea和Data组件不受影响。

方案二：使用Context选择器（可选） #

如果不想拆分过多Context，可结合useMemo和React.memo实现局部订阅，让组件仅监听Context中的特定部分：

import { useContext, useMemo } from 'react';
import { ParentContext } from './Parent';

// 自定义hook，仅提取menu部分状态
const useMenuState = () => {
  const context = useContext(ParentContext);
  return useMemo(() => context.menu, [context.menu]);
};

// 用React.memo包裹组件，避免无意义重渲染
const Menu = React.memo(() => {
  const menuState = useMenuState();
  // 组件逻辑
  return <div>Menu content</div>;
});

这种方式无需新增Context，但需严格维护useMemo的依赖项，否则仍可能出现不必要的重渲染。

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