javascript - React 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 会导致错误，因为它们是异步的，但这里的情况并非如此。

Answer 1

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

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

如果您记录 this.state.count 现在它的值将仅增加 1，但如果您这样做:

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

您将得到正确的输出。

还有

the DOM is not updated as soon as setState is invoked. Rather, React batches multiple updates into one update and then renders the DOM. You may receive outdated values while querying the state object How to NOT React

编辑: 我刚刚看到你问题的最后一段，看来我的答案正是你所说的你已经知道的!那么在这种情况下，我认为这只是尊重良好的做法。