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

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

偶尔发现,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的生命周期函数要满足这两个条件:

  1. 要在render函数之后执行(也就是Fiber中的Phase 2阶段函数)
  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>
        <div>React stargazers count: {this.state.reactStargazersCount} </div>
        <div>Redux stargazers count: {this.state.reduxStargazersCount} </div>
      </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
#enter shouldComponentUpdate
#enter render
#after get response in componentDidMount
#after get json in componentDidMount
#enter shouldComponentUpdate
#enter render

从这段log可以清晰地看到,componentWillMount使用async根本不会阻断React去调用render,shouldComponentUpdate用async返回一个fals而依然会被认为返回布尔的true。

async/await这招,还是主要在componentDidMount和componentDidUpdate里用合适。


了解更多React知识,欢迎关注本专栏《进击的React》。

另外可以订阅Live《帮助你深入理解React 》和《深入理解React v16新功能》来获取深度见解。

编辑于 2017-10-25

文章被以下专栏收录