ReactJS更新state引发页面卡顿，如何优化状态更新逻辑？

你遇到的卡顿本质是单条状态更新触发了全量组件重渲染，JS主线程被大量重复的Diff计算占用，导致UI动画、交互响应被阻塞，和你推测的状态更新没有做到数值隔离的判断一致。

• 状态结构拆分
  不要将所有计数器的数值统一存储在App组件的顶层state中，将状态下放到每个独立的计数器组件内部维护，仅在需要全局汇总计数时再通过事件通知顶层组件。单个计数器更新时只会触发自身重渲染，不会波及其他无关组件。
• 保证props引用稳定
  用React.memo包裹所有计数器子组件，阻断不必要的重渲染；你当前使用的useReducer返回的dispatch函数本身引用稳定，将handleClick包裹在useCallback中时仅需将dispatch作为唯一依赖项，保证传递给子组件的回调引用不会随顶层组件重渲染发生变化。
• 优化reducer的不可变更新逻辑
  当前UPDATE_COUNT分支的状态更新逻辑如果是全量替换state对象，会导致所有依赖state的组件都判定为需要更新。修改时仅更新对应ID的计数字段，其余字段保留原有引用：

  case "UPDATE_COUNT":
    return {
      ...state,
      counts: state.counts.map(item => 
        item.id === action.payload.id ? {...item, value: action.payload.value} : item
      )
    }
  

  也可以直接引入Immer库简化不可变更新的写法，同时保证未修改字段的引用稳定。
• 全局状态分片（如果必须保留顶层状态）
  如果业务要求必须将所有计数存在顶层，可以拆分Context，每个计数器仅订阅自身对应的状态片段，避免全局状态任意修改都触发所有订阅组件重渲染。

打开React DevTools的「Highlight updates when components render」开关，点击按钮时即可直观看到哪些组件发生了不必要的重渲染，针对对应组件调整优化逻辑即可。

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