react如何更新state

使用 setState 方法（类组件）

在类组件中，通过调用 this.setState() 更新状态。该方法接受一个对象或函数作为参数，用于合并到当前状态。

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

若新状态依赖前一个状态，建议使用函数形式：

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

使用 useState Hook（函数组件）

在函数组件中，通过 useState Hook 定义状态变量和更新函数。直接调用更新函数并传入新值即可更新状态。

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

若新状态依赖前一个状态，传入函数确保准确性：

setCount((prevCount) => prevCount + 1);

合并状态更新

React 可能会批量处理状态更新以提高性能。若需在更新后立即操作新状态，可在 setState 或 useState 更新函数中传入回调（类组件）或使用 useEffect（函数组件）。

类组件回调示例：

this.setState({ count: 1 }, () => {
  console.log('状态已更新:', this.state.count);
});

函数组件使用 useEffect：

useEffect(() => {
  console.log('状态已更新:', count);
}, [count]);

不可变数据原则

更新状态时需保持不可变性，避免直接修改原状态。对于对象或数组，应创建新副本：

// 对象
setUser({ ...user, name: 'New Name' });

// 数组
setItems([...items, newItem]);

注意事项

• 异步性：状态更新可能是异步的，不要依赖当前状态计算下一个状态。
• 批量更新：React 会合并多次 setState 调用，减少渲染次数。
• 函数组件依赖：在 useEffect 或 useCallback 中，需将状态依赖项添加到依赖数组。