react组件何时请求异步数据——componentWillMount或者componentDidMount?

问题背景

  在使用react框架完成业务需求时,经常会遇到在组件中异步请求服务端数据的情况。项目组成员在react组件发送异步请求的时机上往往有分歧,一少部分人支持在componentWillMount中发送请求,更多的人支持在componentDidMount中处理请求。那究竟在哪个生命期函数中处理异步请求较好呢?

问题解决方案

  react官方文档推荐在componentDidMount中处理组件的异步请求,理由如下:

  1. 如果在componentWillMount中发送异步请求,在SSR(服务端渲染)的情况下,服务端与客户端共用一套代码,此时会发出两次请求(服务端请求一次、客户端请求一次),服务端的请求是多余的。如果将异步请求放在componentDidMount中,服务器不会执行componentDidMount函数,可以减少不必要的请求。
  2. 从react 16.3开始,componentWillMount这个生命周期函数钩子会被丢弃,于是不建议使用componentWillMount。

  react官方文档还建议,在服务端渲染过程中如果需要在组件渲染前同步获取数据,可以使用constructor替换componentWillMount进行处理。