Reactjs 直接在彼此之后设置状态是否不好？

我的设想是：

this.setState({firstState:1})
if(condition){
  this.setState({secondState:2})
}

firsState应始终设置为1，但只有满足特定条件时，secondState才应设置为2

这种做法是不是因为状态会在彼此之后直接更新两次？它会影响性能吗

这个代码更好吗

if(condition){
  this.setState({firtState:1,secondState:2})
}else{
  this.setState({firstState:1})
}

---

即使按顺序放置多个

setState

调用，React也可能将它们批处理到一个事务调用中

因此，没有不利之处

---

请参见

您可以对其进行一次更新：

const myAmazingState = {
  firstState: 1,
  secondState: condition ? 2 : this.state.secondState
}

然后更新你的状态

this.setState({...myAmazingState})

---

希望它有意义

React实际上为您提供了实现这一目标的方法。正如前面所指出的，当前方法的问题是React可能会批处理

setState

，但您可以使用functional

setState

。您的代码将如下所示

this.setState((state, props) => {
  // update state
  if(condition) {
    //update state 2
  }

  // return a single new object for your new state
});

---

React.js经过优化，可以经常调用setState，它实际上并不总是在每次调用setState时重新渲染，但实际上会将多个状态更改捆绑到一个重新渲染中

为了两次更改状态，您需要执行以下操作以避免任何可能的问题，因为this.setState是一个异步函数

this.setState({data: {}}, () => this.setState({data: {name: "tom"}}))

---

在这里您可以看到，我们正在向setState传递一个回调，以便在它完成状态设置后执行。

setState

是异步的，因此这是不准确的。@HunterMcMillen是的，不会改变它可能是一个事务。这有一个缺点，如果React决定不批处理它们，则您的状态不同步。您介意在继续处理之前更新状态吗？如果

条件

为

真

，

第一个状态

等于

1

，

第二个状态

仍然不等于

2

，这对您来说是不一致的状态吗？是的，第二个代码更好。问题是关于两个连续的

设置状态

调用的后果。另外，您不应该在

setState

调用中使用

this.state

。改为使用回调。@RaphaMex

this.state

在构造

myAmazingState

对象时使用，而不是在调用

setState

No时使用，我认为在set state中使用this.state是可以的。这和声明是一样的outside@RaphaMex想法就在这里——如果您不确定是否有多个

setState

方法按顺序调用，为什么不只使用一次呢？@HunterMcMillen:

this.state

属性是不可变的。这段代码很好，但很笨拙。精细：如果

secondState

是一个引用，则保留该引用，这样它就不会触发

render

；如果它是一个基本体（如此处），则该值相等，因此不会触发

渲染

。尴尬：在任何情况下，我们做了一个作业，这样它就不会呈现。。。所以我更喜欢OP的版本。