javascript - 为什么有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
}))