React多子组件Card状态管理：现有Context方案的问题咨询

我开发的应用包含多个展示不同信息的Card子组件，当用户在输入栏输入、悬浮Card等操作时，部分Card需要实现高亮、显示警告等效果。为了解耦组件，我目前用Context存储以Card id为键、自定义显示状态对象为值的字典，在App组件中创建多个回调函数供子组件调用，以此修改字典内容。代码示例如下：

// App.ts
export const CardCtx = createContext({});
function App() {
    const [cardStates, setCardStates] = useState<Record<string, CardState>>({}); // TypeScript字典类型
    
    // 子组件用的回调函数，为了避免App代码臃肿，函数定义放在外部
    const handleInput = (args) => { function1(args, cardStates, setCardStates) };
    const handleHover = (args) => { function2(args, cardStates, setCardStates) };

    return (
        <CardCtx.Provider>
            <Component1 callback={handleInput} /> // 包含若干Card组件
            <Component2 callback={handleHover} /> // 包含其他Card组件
        </CardCtx.Provider>
    )
}

// Card.ts，省略导入
function Card({cardInfo}) { // 通过props传入卡片信息
    const cardStates = useContext(CardCtx); // 从App导入的Context
    return (...); // 根据cardStates[cardInfo.id]处理CSS样式
}

目前遇到的问题：

• React对复杂类型状态变量支持不佳，为避免多个回调在重渲染前修改字典，每个回调都要强制使用flushSync，体验很差；
• App组件里堆积了大量回调函数，为了不臃肿只能把函数定义在外部再包装，代码结构繁琐。

优化思路 #

1. 用useReducer替代useState管理复杂状态

把Card状态的修改逻辑迁移到reducer中，所有状态更新都通过dispatch动作完成，既保证更新的原子性，又不用手动处理flushSync的问题。

首先单独定义reducer和动作类型：

// cardStateReducer.ts
type CardStateAction = 
  | { type: 'UPDATE_CARD_STATE', payload: { id: string, state: Partial<CardState> } }
  | { type: 'CLEAR_CARD_STATE', payload: { id: string } }
  | { type: 'RESET_ALL_STATES' };

export function cardStateReducer(state: Record<string, CardState>, action: CardStateAction): Record<string, CardState> {
  switch (action.type) {
    case 'UPDATE_CARD_STATE':
      return {
        ...state,
        [action.payload.id]: {
          ...state[action.payload.id],
          ...action.payload.state
        }
      };
    case 'CLEAR_CARD_STATE':
      const newState = { ...state };
      delete newState[action.payload.id];
      return newState;
    case 'RESET_ALL_STATES':
      return {};
    default:
      return state;
  }
}

修改App组件，用useReducer替代useState，并把dispatch和状态一起放入Context：

// App.ts
import { cardStateReducer } from './cardStateReducer';
export const CardCtx = createContext<{
  cardStates: Record<string, CardState>,
  dispatch: React.Dispatch<CardStateAction>
}>({ cardStates: {}, dispatch: () => {} });

function App() {
  const [cardStates, dispatch] = useReducer(cardStateReducer, {});

  return (
    <CardCtx.Provider value={{ cardStates, dispatch }}>
      <Component1 />
      <Component2 />
    </CardCtx.Provider>
  )
}

子组件直接通过Context获取dispatch，不用再传回调：

// Component1.tsx
function Component1() {
  const { dispatch } = useContext(CardCtx);

  const handleInput = (args) => {
    // 根据输入逻辑获取目标Card的id
    const targetCardId = getTargetCardId(args);
    dispatch({
      type: 'UPDATE_CARD_STATE',
      payload: {
        id: targetCardId,
        state: { isHighlighted: true, warning: '输入不符合要求' }
      }
    });
  };

  return <input onChange={handleInput} />;
}

Card组件的使用保持简洁：

// Card.ts
function Card({ cardInfo }) {
  const { cardStates } = useContext(CardCtx);
  const currentState = cardStates[cardInfo.id] || {};

  return (
    <div className={`card ${currentState.isHighlighted ? 'highlighted' : ''}`}>
      {currentState.warning && <div className="warning">{currentState.warning}</div>}
      {/* 卡片内容 */}
    </div>
  );
}

2. 封装状态操作工具函数，避免回调堆积

把常见的Card状态操作封装成独立的工具函数，放在单独文件中，子组件可以直接调用生成对应动作，不用在App里定义一堆回调。

// cardStateActions.ts
import type { CardStateAction } from './cardStateReducer';

export const updateCardHighlight = (id: string, isHighlighted: boolean): CardStateAction => ({
  type: 'UPDATE_CARD_STATE',
  payload: { id, state: { isHighlighted } }
});

export const setCardWarning = (id: string, warning: string | null): CardStateAction => ({
  type: 'UPDATE_CARD_STATE',
  payload: { id, state: { warning } }
});

子组件里直接使用这些工具函数：

// Component2.tsx
import { updateCardHighlight } from './cardStateActions';

function Component2() {
  const { dispatch } = useContext(CardCtx);

  const handleCardHover = (cardId: string, isHovered: boolean) => {
    dispatch(updateCardHighlight(cardId, isHovered));
  };

  return <CardList onCardHover={handleCardHover} />;
}

3. 可选：按需拆分Context（视业务复杂度）

如果Card的状态操作可以按功能拆分（比如高亮、警告分属不同逻辑），可以把Context拆分成多个，避免所有状态都堆在同一个Context里，减少不必要的重渲染。但注意不要过度拆分，反而增加维护成本。

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