Question

我的情景是：

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})
}

Answer 1

您可以更新一次：

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

然后更新您的州

this.setState({...myAmazingState})

希望它有意义

Answer 2

即使你按顺序发出多个setState个电话，React也可以将它们分批到一个交易电话中。

所以没有缺点。

请参阅React may batch multiple setState() calls into a single update for performance.

Answer 3

React实际上为您提供了实现这一目标的方法。正如前面所指出的，当前方法的问题在于React可能批量setState，但您可以使用功能setState。你的代码看起来像这样。

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

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

Answer 4

React.js被优化为经常调用setState，每次调用setState时它实际上并不总是重新呈现，但实际上会将多个状态更改捆绑到一个重新呈现中。

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

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

在这里你可以看到，我们正在传递setState一个回调，一旦它完成设置状态就会执行。

在彼此之后直接设置状态不好吗？

4 个答案: