React 中 setState 更新状态的两种写法

React 中 setState 更新状态的两种写法

在 React 中，我们经常需要更新组件的状态（state）。使用 setState 方法是一种常见的方式来实现状态的更新，而在使用 setState 方法时，有两种不同的写法，即对象式和函数式。本文将介绍这两种写法的区别和使用场景。

1. 对象式写法

对象式写法是最常见的 setState 方法的调用方式之一。在这种写法中，我们直接传入一个对象来更新状态。

// 对象式写法
this.setState({ count: this.state.count + 1 }, () => {
  // 在更新完state、执行完render之后执行
  console.log('新的state值', this.state.count);
});

2. 函数式写法

函数式写法是另一种更推荐的 setState 方法的调用方式。在这种写法中，我们传入一个函数作为参数，函数接收前一个状态作为参数，返回一个对象用于更新状态。

// 函数式写法
this.setState(state => ({ count: state.count + 1 }), () => {
  console.log('新的state值', this.state.count);
});

区别和使用场景

• 对象式写法直接传入一个对象，不受到前一个状态的影响，适用于不依赖于前一个状态的简单状态更新。
• 函数式写法通常在我们需要依赖于前一个状态的情况下使用，因为它可以确保我们得到的是最新的状态值。这种写法适用于需要在一次更新中使用前一个状态多次，或者需要根据前一个状态计算新状态的复杂逻辑。因为在函数式写法中，React 会确保在调用函数时传递给我们最新的状态值，从而避免了因为异步更新导致的状态不一致的问题。

结语

了解和灵活运用 setState 方法的两种写法，可以帮助我们更好地管理组件的状态，提高代码的可读性和可维护性。根据具体的场景选择合适的写法，可以有效地避免一些潜在的状态更新问题。

参考

• React 中 setState 更新状态的两种写法
• 完整代码