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 initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return <button onClick={() => dispatch({ type: 'increment' })}>+</button>;
}避免在渲染中直接调用 setState
在渲染过程中调用 setState 会触发无限循环。确保 setState 仅在事件处理或副作用（如 useEffect）中调用。
// 错误示例（导致无限渲染）
function BadExample() {
const [count, setCount] = useState(0);
setCount(count + 1); // 直接在渲染中调用
return <div>{count}</div>;
}
// 正确示例（在事件中调用）
function GoodExample() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}使用 useMemo 和 useCallback 优化依赖项
通过缓存函数或计算结果，减少因依赖变化触发的状态更新。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);批量更新外部状态管理工具
若使用 Redux 或 MobX，优先通过它们的批量更新机制（如 Redux 的 batch）减少渲染次数。
import { batch } from 'react-redux';
batch(() => {
dispatch(action1());
dispatch(action2());
});减少不必要的状态提升
将状态限制在需要它的最小组件范围内，避免因父组件状态变化导致子组件不必要的渲染。
// 将状态下沉到子组件
function Parent() {
return <Child />; // 不传递不必要的状态
}
function Child() {
const [localState, setLocalState] = useState(0);
return <div>{localState}</div>;
}
