React中setState不立即更新

React中setState不立即更新

问题

昨天开发项目时需要在setState之后使用this.state中刷新好的值,碰到setState没有立即刷新

toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
          toolTipVisible:false,
        });
        BroadcastUtil.broadcastCollapsedChange( this.props.horn,null,this.state.collapsed)
    };

原因

查阅资料后,发现react中setState是使用了基于事务的异步更新机制,不会立即刷新

对于dom的操作对性能的损耗是非常严重的,所以react为了提高整体的渲染性能,会将一次渲染周期中的state进行合并,在这个渲染周期中你对所有setState的所有调用都会被合并起来之后,再一次性的渲染,这样可以避免频繁的调用setState导致频繁的操作dom,提高渲染性能。具体的实现方面,可以简单的理解为react中存在一个状态变量isBatchingUpdates,当处于渲染周期开始时,这个变量会被设置成true,渲染周期结束时,会被设置成false,react会根据这个状态变量,当出在渲染周期中时,仅仅只是将当前的改变缓存起来,等到渲染周期结束时,再一次性的全部render
https://blog.csdn.net/handsomexiaominge/article/details/86348235

解决

1. 直接传需要刷新的值

toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
          toolTipVisible:false,
        });
        BroadcastUtil.broadcastCollapsedChange( this.props.horn,null,!this.state.collapsed)
    };

2. 使用setState的回调函数

toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
          toolTipVisible:false,
        }()=>{
            BroadcastUtil.broadcastCollapsedChange( this.props.horn,null,this.state.collapsed)
        });
    };

3. 使用setTimeout或者setInterval

setTimeout(()=>{
            this.setState({
                collapsed: !this.state.collapsed,
                toolTipVisible:false,
              });
              BroadcastUtil.broadcastCollapsedChange( this.props.horn,null,this.state.collapsed)
        })

使用

最后选择用第一种方法直接传设置的值,为了不破坏react原有的刷新机制