React中的async/await生命周期函数

程墨Morgan

知乎十年新知答主

偶尔发现，React的生命周期函数可以写成async的形式，比如，componentDidMount可以写成这样。

 async componentDidMount() {
     //函数体中可以使用await
  }

async/await可以简化异步操作的代码，用同步的形式表示异步的过程，这个语法，没有赶上ES6标准，也没有赶上ES7标准，但是，因为Babel的存在，实际上使用起来没有任何障碍。

因为Babel的支持，把React的生命周期函数时限为async函数其实也没有什么神奇之处，因为React要做的只是去调用各个生命周期函数，而已，而async函数被调用之后，返回的是一个Promise对象。

要注意，有些生命周期函数返回Promise对象无所谓，比如componentDidMount，因为它的返回值本来React就不关心。

还有一些生命周期函数返回Promise对象就扯淡了，比如render，把render写成async是肯定不行的，因为React预期render返回一个组件的结构或者null或者undefined，返回一个Promise算什么事，React也不会去等待Promise成功完结，也不会去拿让Promise成功完结的值。

还有一些生命周期函数返回Promise对象会产生你意向不到的结果，比如shouldComponentUpdate，比如这样写。

 async shouldComponentUpdate() {
    return false; //实际上不会这么写，应该根据state和prop计算出false或者true
  }

表面上看，shouldComponentUpdate返回的是false，组件不会被重新渲染，其实，因为函数声明为async，所以每次返回的是一个Promise.resolve(false)，一个Promise对象被转化为bool类型，绝对是true，所以实际上在React看来shouldComponentUpdate返回的永远是true。

而且，在React v16中引入了 Fiber架构，一旦将来React版本中打开异步渲染（async rendering）的功能，那么，render之前的生命周期函数在一次渲染中都可能被调用多次（具体原因参见《深入理解React v16新功能》），所以，我们应该尽量保持render之前的生命周期函数不要产生副作用。

异步操作天生就是有副作用的操作，所以， 不要把render之前的生命周期函数标记为async 。

上面是React中所有的生命周期函数已经相关过程。

适合使用async的生命周期函数要满足这两个条件：

要在render函数之后执行（也就是Fiber中的Phase 2阶段函数）
React不关心这个生命周期函数的返回值

如此说来，似乎也只有render之后的两个生命周期函数componentDidUpdate和componentDidMount可以用上async这招，实际上，在这两个函数中做AJAX的异步操作也是一种普遍接受的模式。

比如，我们可以这么写。

 async componentDidMount() {
    const res = await fetch('https://api.github.com/repos/facebook/react')
    const json = await res.json()
    this.setState({reactStargazersCount: json.stargazers_count});
  }

上面其实是一个异步的过程，但是看起来却一个回调函数都没用，就和同步代码一样，这就是async/await的好处。

理论上，componentWillMount这样的函数中也可以使用async，但是千万不要以为React会因此而异步处理componentWillMount，React只是调用componentWillMount一次而已，然后componentWillMount中的await会依次执行，但是React才不会等它呢，直接就同步往下运行去执行其他生命周期函数了。

看这个例子，在componentWillMount中获取Redux在github上的星数，在componentDidMount中获取React在github上的星数。

class Demo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      reactStargazersCount: '',
      reduxStargazersCount: '',
  async componentWillMount() {
    console.log('#enter componentWillMount');
    const res = await fetch('https://api.github.com/repos/reactjs/redux')
    console.log('#after get response in componentWillMount');
    const json = await res.json()
    console.log('#after get json in componentWillMount');
    this.setState({reduxStargazersCount: json.stargazers_count});
  async shouldComponentUpdate() {
    console.log('#enter shouldComponentUpdate');
    return false;
  render() {
    console.log('#enter render');
    return (
        <div>React stargazers count: {this.state.reactStargazersCount} </div>
        <div>Redux stargazers count: {this.state.reduxStargazersCount} </div>
  async componentDidMount() {
    console.log('#enter componentDidMount');
    const res = await fetch('https://api.github.com/repos/facebook/react')
    console.log('#after get response in componentDidMount');
    const json = await res.json()
    console.log('#after get json in componentDidMount');
    this.setState({reactStargazersCount: json.stargazers_count});
};

在console中可以看到输出：

#enter componentWillMount
#enter render
#enter componentDidMount
#after get response in componentWillMount
#after get json in componentWillMount