React(7)异步的数据更改(setState 是异步行为)

与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)
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值