react如何更新state

更新 State 的基本方法

在 React 中，更新 state 需要使用 setState 方法（类组件）或 state 更新函数（函数组件）。直接修改 state 的值不会触发组件的重新渲染。

类组件中的 state 更新

在类组件中，使用 this.setState() 方法来更新 state。setState 可以接受一个对象或函数作为参数。

this.setState({ count: this.state.count + 1 });

当新 state 依赖于之前的 state 时，建议使用函数形式的 setState：

this.setState((prevState) => ({
  count: prevState.count + 1
}));

函数组件中的 state 更新

在函数组件中，使用 useState Hook 来定义和更新 state。state 更新函数可以接受新值或一个更新函数。

const [count, setCount] = useState(0);

// 直接传递新值
setCount(count + 1);

// 使用函数形式
setCount(prevCount => prevCount + 1);

合并 state 更新

React 的 setState 会自动合并对象形式的 state 更新。但函数组件中的 useState 不会自动合并，需要手动处理。

// 类组件中会自动合并
this.setState({ name: 'New Name' }); // 只更新 name，其他 state 不变

// 函数组件中需要手动合并
setUser(prevUser => ({ ...prevUser, name: 'New Name' }));

异步 state 更新

React 的 state 更新可能是异步的。如果需要基于最新的 state 执行操作，可以在 useEffect Hook 或 setState 的回调函数中处理。

// 类组件
this.setState({ count: 1 }, () => {
  console.log('State updated:', this.state.count);
});

// 函数组件
useEffect(() => {
  console.log('Count updated:', count);
}, [count]);

批量 state 更新

React 会自动批量处理同一事件循环中的多个 state 更新。如果需要强制同步更新，可以使用 flushSync（React 18+）。

import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(c => c + 1);
});
flushSync(() => {
  setFlag(f => !f);
});