精读《Javascript 事件循环与异步》

[ascoders]

本周阅读的文章：传送门

事件循环作为 js 的基础特性，掌握后可以提高每一行代码的质量。

[hardfist]

第一段代码等价于

componentWillMount() {
    return new Promise(resolve => {
      this.setState({
        a: 1
      })
      resolve();
    })
  }

React 不会对componentWillMount进行await调用，new Promise(resolver)里的resolver是同步执行的，所以实际上这段代码就等价于this.setState({a:1})，componentWillMount中同步调用setState不会触发rerender。
而第二段代码等价于

 componentWillMount() {
    return new Promise(resolve => {
      return Promise.resolve().then(() => {
        this.setState({
          a: 1
        })
      })
    })
  }

这里的setState是在内部Promise的then回调里执行的，所以是异步执行的，所以会触发rerender。
所以两者的区别只是在于在componentWillMount里是同步执行还是异步执行的而已。

[negativeentropy9]

第一段代码等价于

componentWillMount() {
    return new Promise(resolve => {
      this.setState({
        a: 1
      })
      resolve();
    })
  }

React 不会对componentWillMount进行await调用，new Promise(resolver)里的resolver是同步执行的，所以实际上这段代码就等价于this.setState({a:1})，componentWillMount中同步调用setState不会触发rerender。
而第二段代码等价于

 componentWillMount() {
    return new Promise(resolve => {
      return Promise.resolve().then(() => {
        this.setState({
          a: 1
        })
      })
    })
  }

这里的setState是在内部Promise的then回调里执行的，所以是异步执行的，所以会触发rerender。
所以两者的区别只是在于在componentWillMount里是同步执行还是异步执行的而已。

老铁 666