反應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。 而查詢狀態對象，可能會收到過時的價值觀如何不反應

編輯 ：我剛剛看到了您問題的最后一段，似乎我的回答正是您所說的，已經知道了！ 在那種情況下，我認為它只是尊重良好做法。