react如何减少setState

减少 React 中 setState 的优化方法

合并多次状态更新
使用函数式更新方式合并多个 setState 调用。React 会将多次状态更新批量处理，减少不必要的渲染。例如：

// 避免多次调用
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

// 改为函数式更新
this.setState(prevState => ({ count: prevState.count + 1 }));
this.setState(prevState => ({ count: prevState.count + 1 }));

使用 useReducer 替代多个 useState
对于复杂状态逻辑，useReducer 可以集中管理状态变更，减少分散的 setState 调用。示例：

const [state, dispatch] = useReducer(reducer, initialState);
// 通过 dispatch 统一处理状态变更
dispatch({ type: 'INCREMENT' });

避免在渲染中计算派生状态
将派生状态的计算移至 useMemo 或类组件的 getDerivedStateFromProps，避免因状态变化触发冗余更新。例如：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

批量更新外部状态管理
在 Redux 或 Context API 中，合并多个状态变更为一个 action 或 context update，减少触发渲染的次数。

使用 React.memo 或 PureComponent
通过浅比较避免子组件不必要的渲染，间接降低父组件中 setState 的触发频率。示例：

const MemoizedComponent = React.memo(MyComponent);

延迟非关键状态更新
对非视觉相关的状态（如日志记录），使用 setTimeout 或 requestIdleCallback 延迟更新，避免阻塞主线程。

优化事件处理函数
避免在事件处理中频繁调用 setState，可通过防抖（debounce）或节流（throttle）控制触发频率。例如：

const handleScroll = _.throttle(() => {
  setScrollPosition(window.scrollY);
}, 100);