React（7）异步的数据更改（setState 是异步行为）

我就是我 2022-05-31 08:08 220阅读 0赞

与Vue不同，React的设置变量是异步的。

### 13、setState 是异步行为 ###

> setState()

这是一个异步操作，如：

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
                count: 0
            }
            this.clickCountAsync = this.clickCountAsync.bind(this)
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            return <div>
                <button onClick={
       this.clickCountAsync}>异步增加count</button>
            </div>
        }
    
        clickCountAsync() {
            console.log('【异步】setState之前，count的值：', this.state.count)
            this.setState({
                count: this.state.count + 1
            })
            console.log('【异步】setState之后，count的值：', this.state.count)
        }
    }

会发现，两个 log 语句，输出的结果的值，都是一样的。

原因是 React 会合并多个 setState，然后统一更新；

那么如何获取更新后的数据，答案是通过回调函数；

说明见注释

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
                count: 0,
                anotherCount: 0
            }
            this.clickCountAsync = this.clickCountAsync.bind(this)
            this.clickCountSync = this.clickCountSync.bind(this)
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            return <div>
                <button onClick={
       this.clickCountAsync}>异步增加count</button>
                <br/>
                <button onClick={
       this.clickCountSync}>增加count，并同步更新计数器二的值等于异步增加后的count</button>
                <br/>
                计数器二：{
       this.state.anotherCount}
            </div>
        }
    
        clickCountAsync() {
            console.log('【异步】setState之前，count的值：', this.state.count)
            this.setState({
                count: this.state.count + 1
            })
            console.log('【异步】setState之后，count的值：', this.state.count)
        }
    
        clickCountSync() {
            // 通过setState 更新 state.count 的值
            this.clickCountAsync()
            // 1、这里是更新前的值
            console.log('【同步】setState之前，count的值：', this.state.count)
            this.setState((prevState, props) => {
                // 3、这里的回调函数，是更新后执行（即
                console.log(prevState, props)
                // 返回值就像设置 setState 的参数一样
                return {
                    anotherCount: prevState.count
                }
            })
            // 2、这里也是更新前的值
            console.log('【同步】setState之后，count的值：', this.state.count)
        }
    }

当然，这又出现一个问题，那就是假如我调用一个方法，分别修改了 A 变量，然后又调用某个方法需要修改 B 变量，并且 B 变量依赖于 A 变量修改后的值（这就是以上场景）；

可是假如我又需要调用第三个方法修改 C 变量，并且 C 的值依赖于 B 修改后的值。那么这就有问题了。

原因是：

1.  React 里并不存在类似 Vue 的 computed/watch 这样的计算属性。如果需要实现，那么可能需要引入额外的库（watch.js/Rx.js/mobx）；
2.  setState 本身是异步的，并且回调函数获取变更后的值，也是异步的。因此在场景复杂的情况下，你很难判断哪一个 setState 的回调函数，会优先执行；

解决办法：

1.  一个是引入额外的库，仿 Vue.js；
2.  考虑使用生命周期函数 `componentWillUpdate(nextProps, nextState)`，将依赖的变量的修改逻辑，添加到这个函数里，如下面代码，可以解决部分场景的问题；

componentWillUpdate(nextProps, nextState) { nextState.anotherCount *= 2 console.log(nextProps, nextState) }