时间戳

首页 > 解决方案 > React setState 正确使用

javascript - React setState 正确使用

问题描述

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

标签： javascriptreactjs

解决方案

您不应该这样做的一个原因是 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。您可能会在查询状态对象时收到过时的值如何不做出反应

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

推荐阅读