react如何减少setState
优化 setState 的使用方法
合并多次状态更新
在 React 中，setState 可能是异步的，多次调用会被批量处理。但可以通过函数式更新确保基于最新状态，减少重复渲染。例如：
// 避免多次独立调用
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 }));使用函数式组件与 Hooks
在函数组件中，useState 的更新函数也支持函数式更新，且可以通过 useReducer 合并复杂逻辑的状态变更：
const [state, dispatch] = useReducer(reducer, initialState);
// 通过 dispatch 统一管理状态变更避免不必要的状态提升
局部状态管理
将状态限制在需要它的组件内部，避免将状态提升到更高层级的组件导致不必要的渲染。例如，表单控件的状态可以仅在组件内部维护。
使用 Context 或状态管理库
对于跨组件共享的状态，使用 React Context 或 Redux 等库集中管理，避免多层传递和频繁的 setState 调用。
性能优化技巧
使用 shouldComponentUpdate 或 React.memo
通过浅比较避免子组件不必要的渲染：
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps) {
return nextProps.value !== this.props.value;
}
}
// 或函数组件
const MemoizedComponent = React.memo(MyComponent);防抖或节流高频操作
对于频繁触发状态更新的场景（如滚动事件），使用防抖（debounce）或节流（throttle）限制更新频率：
import { debounce } from 'lodash';
handleScroll = debounce(() => {
this.setState({ position: window.scrollY });
}, 100);代码结构优化
提取状态逻辑到自定义 Hook
将复杂的状态逻辑封装到自定义 Hook 中，便于复用和测试：
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(c => c + 1);
return { count, increment };
}使用 useCallback 和 useMemo
缓存回调函数和计算结果，避免因重新创建函数触发子组件渲染：
const memoizedCallback = useCallback(() => {
doSomething(state);
}, [state]);
