为什么有2个setState可用

Question

假设我有一个状态，

state = {
  counter: 0
}

单击按钮，我要更新状态。

我的updateCounter函数是这个

updateCounter = () => {
    this.setState({counter: 1})
}

哪个做得好。

我遇到了人们正在使用它的情况，

updateCounter = () => {
    this.setState(prevState => ({
       ...prevState,
       counter: prevState.counter + 1
    }))
}

我的问题是

1. 它们之间有什么区别？

2. 为什么我们有2个setState？

3. 使用任何一个都可以提高性能吗？

Answer 1

存在第二个变体，因此您可以基于旧状态计算新状态。如果这是您需要执行的操作，则应使用第二个，否则您可能会遇到一些细微的错误，即没有将状态设置为期望的值。如果您的新状态与以前的状态无关，那么使用哪个状态都没关系。

P.s，在此代码中无需传播先前的状态。在类组件的this.setState中，React将为您进行浅层合并：

this.setState(prevState => ({
   ...prevState, // <-- not needed
   counter: prevState.counter + 1
}))

Answer 2

setState方法有两种形式：

• 您刚刚将其传递给它的新值以设置为状态（您的第一个示例）。
• 函数形式，您可以在其中使用当前状态的值来设置新状态（第二个示例）。

例如，在使用计数器的情况下，如果要将计数器从状态递增1，则最好使用setState的函数形式，因为它可以确保您使用的是状态的最新值。

此外，如果新状态取决于当前状态，则不使用功能形式可能会导致一些错误。我早些时候wrote a bit more in detail谈到了它和其他常见问题。

在official React documentation中也有很好的解释。