反应setState的正确用法

Question

因此，我了解到很多内容，即setState调用是批处理的并且是异步的，并且当从setState的状态读取任何值时，应该使用updater函数来更新状态。

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多次调用setState会在这种情况下导致错误，因为它们是异步的，但是这里不是这种情况。

Answer 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。 而查询状态对象，可能会收到过时的价值观如何不反应

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