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原有的刷新机制