React setState同步异步更新的场景

·  阅读 503

欢迎关注react源码系列一起学习源码呀。Github常更新,掘金不常更新。Github仓库中不仅有webpack生态源码,react源码,还有前端基础知识,八股文,踩坑经验等

setState同步更新还是异步更新?

  • React17稳定版本或者React17以前的版本中,即legacy模式下,在react能够接管的地方,比如生命周期或者合成事件中,setState是异步更新的。 但是在setTimeout或者通过window.addEventListener添加的原生事件中,setState则是同步的。
// Legacy同步模式
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
复制代码
  • 在React开发版本中,即concurrent模式下,setState的更新统一是异步的
// Concurrent异步模式,在这个模式下,任何情况下setState都是异步更新的。目前createRoot方法还在实验中
const container = document.getElementById('root');
// ReactDOM.render(<App />, container);
ReactDOM.createRoot(container).render(<App />)
复制代码

setState更新场景

以下面的代码为例,以下示例均在react@17.0.1react-dom@17.0.1版本的legacy模式下实现

import React from 'react';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      number: 0
    }
  }

  handleClick = event => {
    // todo
  }

  render(){
    console.log('render...', this.state)
    return (
      <div>
        计数器:{this.state.number}
        <div>
          <button onClick={this.handleClick}>add</button>
        </div>
      </div>
    )
  }
}
export default App;
复制代码

setState异步更新场景

handleClick = event => {
    this.setState({ number: this.state.number + 1 }, () => {
      console.log('setState1 callback', this.state)
    })
    console.log('after setState1', this.state) // number: 0
    this.setState({ number: this.state.number + 1 }, () => {
      console.log('setState2 callback', this.state)
    })
    console.log('after setState2', this.state)  // number: 0
}
复制代码

点击按钮,打印顺序:
after setState1 {number: 0}
after setState2 {number: 0}
render... {number: 1}
setState1 callback {number: 1}
setState2 callback {number: 1}

可以得出以下结论:

  • 状态是异步更新的
  • setState的回调函数是在状态更新后批量执行的

setState同步更新场景:setTimeout中

handleClick = event => {
    setTimeout(() => {
      this.setState({ number: this.state.number + 1 }, () => {
        console.log('setState1 callback', this.state)
      })
      console.log('after setState1', this.state) // number: 0
      this.setState({ number: this.state.number + 1 }, () => {
        console.log('setState2 callback', this.state)
      })
      console.log('after setState2', this.state)  // number: 0
    }, 4)
}
复制代码

打印顺序:
render... {number: 1}
setState1 callback {number: 1}
after setState1 {number: 1}
render... {number: 2}
setState2 callback {number: 2}
after setState2 {number: 2}

可以得出以下结论

  • 状态是同步更新的,因此setState的回调也是同步执行的

注意观察render的打印时机以及次数!!!!

setState参数是函数的场景

handleClick = event => {
    this.setState((prevState) => {
      console.log('setState1...', prevState)
      return { number: prevState.number + 1 }
    }, () => {
      console.log('setState1 callback', this.state)
    })

    console.log('after setState1', this.state) 

    this.setState((prevState) => {
      console.log('setState2...', prevState)
      return { number: prevState.number + 1 }
    }, () => {
      console.log('setState2 callback', this.state)
    }) 
    console.log('after setState2', this.state) 
}
复制代码

打印顺序:
after setState1 {number: 0}
after setState2 {number: 0}
setState1... {number: 0}
setState2... {number: 1}
render... {number: 2}
setState1 callback {number: 2}
setState2 callback {number: 2}

结论:

  • 状态是异步更新的
  • 可以发现在批量输出setState1... setState2... 后,即刻打印render...,最后打印 setState1 callback 以及 setState2 callback,这也正是说明setState的回调函数是在render更新之后执行的

setState接收函数的场景:setTimeout

handleClick = event => {
    setTimeout(() => {
        this.setState((prevState) => {
        console.log('setState1...', prevState)
        return { number: prevState.number + 1 }
        }, () => {
        console.log('setState1 callback', this.state)
        })

        console.log('after setState1', this.state) 

        this.setState((prevState) => {
        console.log('setState2...', prevState)
        return { number: prevState.number + 1 }
        }, () => {
        console.log('setState2 callback', this.state)
        })
        
        console.log('after setState2', this.state) 
    }, 4);
}
复制代码

打印顺序:
setState1... {number: 0}
render... {number: 1}
setState1 callback {number: 1}
after setState1 {number: 1}
setState2... {number: 1}
render... {number: 2}
setState2 callback {number: 2}
after setState2 {number: 2}

结论

  • 状态是同步更新的
  • 一定要仔细品味setState、render、 setState callback、after setState打印顺序之间的关系!!!!

ReactDOM.unstable_batchedUpdates强制异步更新的场景

handleClick = event => {
    setTimeout(() => {
        ReactDOM.unstable_batchedUpdates(() => {
            this.setState((prevState) => {
                console.log('setState1...', prevState)
                return { number: prevState.number + 1 }
            }, () => {
                console.log('setState1 callback', this.state)
            })

            console.log('after setState1', this.state) 

            this.setState((prevState) => {
                console.log('setState2...', prevState)
                return { number: prevState.number + 1 }
            }, () => {
                console.log('setState2 callback', this.state)
            })

            console.log('after setState2', this.state) 
        })
    }, 4);
}
复制代码

打印顺序:
after setState1 {number: 0}
after setState2 {number: 0}
setState1... {number: 0}
setState2... {number: 1}
render... {number: 2}
setState1 callback {number: 2}
setState2 callback {number: 2}

结论:

  • 在同步模式(legacy)下,如果需要在setTimeout等中启用异步更新,可以使用React17新增的ReactDOM.unstable_batchedUpdatesAPI

原理

如果需要了解setState同步异步更新的原理,请看下一篇文章

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改