如何仅在Context状态对应部分变化时重新渲染组件？

问题核心在于：每次reducer更新状态时都会生成全新的playerState对象，且Context的value是包含整个状态的新对象，导致所有消费该Context的组件（哪怕只用到状态的某一部分）都会触发重渲染。以下是几种可行的解决方法：

方案一：拆分Context，按状态维度分离 #

将游戏状态拆分为多个独立的Context，让组件仅订阅自己需要的状态片段，从根源上切断无关状态的影响。

1. 创建拆分后的Context #

// PlayerLocationContext.tsx
import { createContext, ReactNode, useReducer } from 'react';
import { PlayerState, PlayerAction, initialPlayerState, playerStateReducer } from './your-state-file';

const PlayerLocationContext = createContext<{
  location: PlayerState['location'];
  dispatch: React.Dispatch<PlayerAction>;
}>({
  location: initialPlayerState.location,
  dispatch: () => {},
});

// PlayerInventoryContext.tsx
const PlayerInventoryContext = createContext<{
  inventory: PlayerState['inventory'];
  dispatch: React.Dispatch<PlayerAction>;
}>({
  inventory: initialPlayerState.inventory,
  dispatch: () => {},
});

2. 修改Provider提供多个Context #

const GameStateProvider = ({ children }: { children: ReactNode }) => {
  const [playerState, playerStateDispatch] = useReducer(playerStateReducer, initialPlayerState);

  return (
    <PlayerLocationContext.Provider value={{
      location: playerState.location,
      dispatch: playerStateDispatch
    }}>
      <PlayerInventoryContext.Provider value={{
        inventory: playerState.inventory,
        dispatch: playerStateDispatch
      }}>
        {children}
      </PlayerInventoryContext.Provider>
    </PlayerLocationContext.Provider>
  );
};

3. 库存组件仅订阅InventoryContext #

import { useContext } from 'react';
import { PlayerInventoryContext } from './PlayerInventoryContext';
import InventoryItem from './InventoryItem';

const PlayerInventory = () => {
  const { inventory } = useContext(PlayerInventoryContext);

  return (
    <div className={'inventory-container'}>
      {inventory.map((item) => <InventoryItem key={item.id} item={item}/>)}
    </div>
  );
};

export default React.memo(PlayerInventory);

此时玩家移动（仅更新location）时，只有订阅PlayerLocationContext的地图组件会重渲染，库存组件不受影响；拾取物品（仅更新inventory）时则反之。

方案二：自定义Selector Hook + useMemo优化 #

如果不想拆分Context，可以通过自定义Hook让组件仅获取所需状态片段，并通过useMemo缓存结果，避免无意义的重渲染。

1. 创建Selector Hook #

import { useContext } from 'react';
import { GameStateContext, PlayerState } from './your-state-file';

export function useGameStateSelector<T>(selector: (state: PlayerState) => T) {
  const { playerState } = useContext(GameStateContext);
  // 仅当playerState或selector返回值变化时，才更新结果
  return useMemo(() => selector(playerState), [playerState, selector]);
}

2. 优化Provider的value缓存 #

原Provider中每次渲染都会生成新的values对象，即使状态未变化也会触发组件重渲染，需用useMemo缓存：

const GameStateProvider = ({ children }: { children: ReactNode }) => {
  const [playerState, playerStateDispatch] = useReducer(playerStateReducer, initialPlayerState);

  const values = useMemo(() => ({
    playerState,
    playerStateDispatcher: playerStateDispatch,
  }), [playerState]); // 仅当playerState变化时才重新生成value

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

3. 库存组件使用Selector Hook #

import { useGameStateSelector } from './useGameStateSelector';
import InventoryItem from './InventoryItem';

const PlayerInventory = () => {
  const inventory = useGameStateSelector(state => state.inventory);

  return (
    <div className={'inventory-container'}>
      {inventory.map((item) => <InventoryItem key={item.id} item={item}/>)}
    </div>
  );
};

export default React.memo(PlayerInventory);

此时useMemo会缓存inventory的引用，只有当库存实际变化时（reducer生成新数组），组件才会重渲染；location变化时，inventory引用不变，组件不会触发重渲染。

方案三：自定义React.memo比较函数 #

通过给React.memo传入自定义比较函数，手动判断组件是否需要重渲染（适合需要精细化控制的场景）：

import InventoryItem from './InventoryItem';

interface PlayerInventoryProps {
  inventory: IInventorySocket[];
}

const PlayerInventory = ({ inventory }: PlayerInventoryProps) => {
  return (
    <div className={'inventory-container'}>
      {inventory.map((item) => <InventoryItem key={item.id} item={item}/>)}
    </div>
  );
};

// 自定义比较逻辑：仅当库存长度或item唯一标识变化时才重渲染
const areEqual = (prevProps: PlayerInventoryProps, nextProps: PlayerInventoryProps) => {
  if (prevProps.inventory.length !== nextProps.inventory.length) return false;
  return prevProps.inventory.every((item, index) => item.id === nextProps.inventory[index].id);
};

export default React.memo(PlayerInventory, areEqual);

需注意这种方法需要上层组件拆分状态并传递props，相对前两种方案繁琐，仅在必要时使用。

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