react数据请求为什么在ComponentDidMount生命周期

2,752 阅读1分钟

在react中,Ajax数据请求通常在ComponentDidMount生命周期中执行,主要考虑以下两个原因:

  1. 首次渲染时,在ComponentDidMount之后组件才生成对应的DOM结构,可以通过this.getDOMNode()来进行访问。也就是说,componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以在这个生命周期中执行异步数据请求可以保证数据的加载。

  2. 在ComponentDidMount中调用setState方法,会触发rerender。官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。即便开启了react异步渲染(fiber),该生命周期也只会执行一次,不会发生多次调用情况。

相应的,不在其他生命周期执行异步数据请求的原因在于:

constructor

constructor设计用来初始化数据用的,而不是数据请求。并且如果请求时间过长或者错误,会导致组件渲染不出来,页面加载失败。

componentWillMount

服务端渲染时,componentWillMount会执行两次,一次在服务端,一次在客户端。而ComponentDidMount只会执行一次。在react16之后,如果开启了异步渲染(fiber),只有componentDidMount生命周期函数确定被执行一次,而componentWillMount、componentwillUpdate、componentWillReceiveProps都可能被执行多次。

render

render执行异步数据请求可能会导致死循环。因为如果在render中获取数据并setState修改状态,则会再次触发render,然后再次触发异步数据请求,从而陷入死循环。