时间戳

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

javascript - 正确使用 setState 方法

问题描述

我是 React 的新手，有一本书告诉我使用 setState 方法是不正确的，如下例所示：

...
constructor(props) {
   super(props);
   this.state = {
       counter: 0,
          hasButtonBeenClicked: false
   }
}

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

handleClick = () => {
   this.setState({ counter: this.state.counter + 1 });
   this.setState({ hasButtonBeenClicked: this.state.counter > 0 });
 }
...

因为 React 异步执行对状态数据的更改，并且可以选择将多个更新组合在一起以提高性能。

我明白了，但由于 React 异步执行更改。第一个 setState 方法可能会在第二个 setState 方法之前首先被调用，这只是概率问题。但是无论我尝试了多少次，第二个 setState 方法总是首先被调用，为什么？

标签： javascriptreactjssetstate

解决方案

尽管它们是异步执行的，但在同一浏览器和/或同一硬件上进行测试时，您不太可能看到差异。不同的浏览器以略微不同的方式优化指令集，这是检查性能的最佳选择（以及为什么仍然建议在所有主要桌面浏览器上进行测试，尽管商业上的 Chrome 通常“足够好”）。

执行此操作的最佳方法 - 假设您希望它们按特定顺序触发 - 将setState调用链接如下：

handleClick = () => {
    this.setState({ counter: this.state.counter + 1 }, () => {
        this.setState({ hasButtonBeenClicked: this.state.counter > 0 })
    });
}

但无论如何，我都会推荐一种不同的设计——将hasButtonBeenClicked逻辑与计数器联系起来会带来问题。

推荐阅读