为啥有 2 个 setState 可用 [重复]

Posted 2023-02-21

【中文标题】为啥有 2 个 setState 可用 [重复]

【英文标题】：Why there is 2 setState's available [duplicate]为什么有 2 个 setState 可用 [重复]

【发布时间】：2020-01-18 12:39:02

【问题描述】：

假设我有一个状态，

state = 
  counter: 0

点击按钮我想更新状态。

我的 updateCounter 函数是这样的，

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

完美的工作。

我遇到了人们使用这个的情况，

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

我的问题是，

它们之间有什么区别？

为什么我们有 2 个 setState？

使用任何一个有什么性能提升吗？

【问题讨论】：

第二个只有在你有counter以外的状态时才相关，并且你想根据之前的值设置一些新的状态。

【参考方案1】：

存在第二个变体，以便您可以根据旧状态计算新状态。如果这是您需要做的事情，您应该使用第二个，否则您可能会遇到一些细微的错误，即您没有将状态设置为您期望的值。如果您的新状态与之前的状态无关，那么您使用哪个状态并不重要。

P.s，在此代码中不需要传播先前的状态。在类组件的this.setState React 会为你做一个浅层合并：

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

【讨论】：

不仅如此，具体来说，如果在一个更新周期内多次设置状态，如果您总是想要相同的输出而不考虑它被调用的次数，请使用第一种方式，或者第二个计算每次调用的总值。

【参考方案2】：

setState方法有两种形式：

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

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

此外，如果您的新状态依赖于当前状态，则不使用函数形式可能会导致一些错误。我早先wrote a bit more in detail 讨论过它和其他常见问题。

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