调用useContext中useReducer的dispatch引发订阅组件重渲染问题

核心原因 #

你遇到的情况主要和React上下文的引用稳定性以及useReducer的更新机制有关：

1. 当调用dispatch时，即便reducer返回了和当前状态完全相同的引用，若上下文Provider的value是每次渲染都新建的对象（比如直接传递{state, dispatch}），Provider所在组件的任何重渲染都会触发订阅上下文的<Item/>重渲染。
2. 首次点击Add时的重渲染，大概率是因为Provider所在组件在首次dispatch调用时触发了一次额外渲染（比如App或父组件的其他状态更新联动），而后续点击时，React通过状态引用对比跳过了Provider的重复渲染，因此<Item/>不再重渲染。

解决方案 #

1. 稳定上下文Value的引用

使用useMemo包裹上下文的value，确保只有当state变化时才生成新的value对象，避免不必要的上下文更新：

import { useReducer, useMemo } from 'react';

// 在Provider所在组件中
const [state, dispatch] = useReducer(mealReducer, initialState);
// 仅当state变化时，才更新contextValue的引用
const contextValue = useMemo(() => ({ state, dispatch }), [state]);

return (
  <SelectedMealContext.Provider value={contextValue}>
    {/* 子组件树 */}
  </SelectedMealContext.Provider>
);

2. 优化

return (<Item/>)

组件的重渲染

如果<Item/>还接收来自<MealLists/>的props，要确保这些props的引用稳定：

• 对于对象/数组类型的props，用useMemo在<MealLists/>中缓存；
• 对于函数类型的props，用useCallback包裹；
• 用React.memo包裹<Item/>，并可选自定义props比较函数，跳过不必要的重渲染：

import { memo } from 'react';

const Item = memo((props) => {
  // 组件逻辑
}, (prevProps, nextProps) => {
  // 自定义比较逻辑，返回true则跳过重渲染
  return prevProps.id === nextProps.id && prevProps.amount === nextProps.amount;
});

3. 确保reducer返回稳定的状态引用

在reducer函数中，当不需要修改状态时，直接返回原state引用，不要新建对象/数组：

function mealReducer(state, action) {
  switch(action.type) {
    case 'ADD_ITEM':
      // 仅当需要修改时，返回新状态
      if (/* 不需要修改的条件 */) {
        return state; // 返回原引用，避免不必要的更新
      }
      // 正常修改逻辑
      return { ...state, /* 更新的属性 */ };
    default:
      return state;
  }
}

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