想试着把react的setState试着改为同步的

Question

async setData(data) {  
  new Promise(() => this.setState(data))  
}
  
async componentDidMount() {  
  console.log('前', this.state.text)  
    
  // 现在必须得await执行它才是同步的
  // 有不用await执行它也能同步的方法吗?  
  await this.setData({text: 222})  
    
  console.log('后', this.state.text)  
}

Answer 1

setState为什么会是异步呢，可以看一下伪代码：

let asyncSetState = false
const asyncStateStack = []

function componentDidMount(fn) {
    asyncSetState = true
    fn()
    asyncSetState = false
}

function setState(...args) {
    if(asyncSetState) {
        // 缓存起来执行
        asyncStateStack.push(args)
    } else {
        // setState
    }
}

react对生命周期和dom事件做了hook处理，为了优化setState的调用，如果你在方法里写个for循环setState那就要很多次的对比和渲染

在什么情况下不是异步

setTimeout(() => {
    this.setState()
}, 0)

dom.addEventListener('click', () => {
    this.setState()
})