React setState 正确使用答案

【问题标题】：React setState proper usageReact setState 正确使用
【发布时间】：2019-05-07 07:39:51
【问题描述】：

所以我读到很多 setState 调用是批处理的并且是异步的，当从setState 中的状态读取任何值时，应该使用更新器函数来更新状态。

class App extends React.Component {
  state = { count: 1 }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 }) 
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
}

仅考虑上面的代码，有人可以通过不使用setState 的更新程序模式来解释在这种情况下可能出现的问题吗？即使稍后调用setState，this.state 将始终引用先前的状态，这正是我们在这里想要的。

PS：我知道在这种情况下多次调用setState 会导致错误，因为它们是异步的，但这里不是这种情况。

【问题讨论】：

参考48563650问题。
缺少constructor()

标签： javascript reactjs

【解决方案1】：

您不应该这样做的一个原因是 setStates 异步行为。例如，如果您在单个函数中有两个 setState，您将无法获得所需的输出。考虑一下：

handleClick(){
    this.setState({
        count : this.state.count + 1
    })
    this.setState({
        count : this.state.count + 1
    })
}

如果你现在记录this.state.count，它的值将只增加一，但如果你这样做：

handleClick(){
    this.setState((prevState)=>({
        amount : prevState.count + 1
    }))
    this.setState((prevState)=>({
        amount : prevState.count + 1
    }))
}

你会得到正确的输出。

还有

调用 setState 后，DOM 不会立即更新。相反，React 将多个更新批处理为一个更新，然后渲染 DOM。您在查询状态对象How to NOT React时可能会收到过时的值

编辑：我刚刚看到你问题的最后一段，似乎我的回答正是你所说的你已经知道的！好吧，在这种情况下，我认为它只是尊重良好做法。

【讨论】：