react面试题-setState可能是异步更新(是同步还是异步)？

react面试题-setState可能是异步更新(是同步还是异步)？

setState为什么设计为异步？可以显著的提升性能；

• 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
• 最好的办法应该是获取到多个更新，之后进行批量更新

那么如何可以获取到更新后的值呢？ 回顾vue nextTick

方式一：setState的回调

this.setState({
            count: this.state.count + 1
        }, () => {
            // 联想 Vue $nextTick - DOM
            console.log('count by callback', this.state.count) // 回调函数中可以拿到最新的 state
        })

方式二：在生命周期函数内获取

//自己定义的 DOM 事件，setState 是同步的。再 componentDidMount 中
        componentDidMount() {
            // 自己定义的 DOM 事件，setState 是同步的
            document.body.addEventListener('click', this.bodyClickHandler)
        }
       bodyClickHandler = () => {
            this.setState({
                count: this.state.count + 1
            })
            console.log('count in body event', this.state.count)
        }

*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐