React请求数据

Question

react生命周期componentWillMount、componentDidMount是现在React请求数据的两个生命周期，

• componentWillMount

这个生命周期在React是在render前执行，而且只执行一次，在这里this.setState在页面更新一次，而且不会重新渲染。
问题一：但是我有一个疑问，因为ajax是异步请求，在浏览器的时间循环机制中是在第一次macrotask事件结束前调用回调函数的this.setState（这个时候dom应该已经或者是vnode已将形成），但是dom应该已经或者是vnode已将形成是调用的render的函数，这里是不是矛盾了？
问题二：React数据请求到底在哪个生命周期中请求，React推荐在componentDidMount请求数据，这个优势是什么（这里调用会导致重新渲染）

Answer 1

一般是放在componentDidMount 里，你放在componentWillMount 里，拿到数据之后setState的时机是不确定的，可能是render之前，也可能是render之后，并不是下一个时间片，这依赖于ajax的返回时间，也并不是说就不能放在componentWillMount里，你也可以把ajax写成同步的

Answer 2

不是“优势是什么”，是人家这两个钩子就是设计来这样用的…
就好比：“请把手穿到手套里面，而不是把手套蒙在脸上”

Answer 3

首先，编程中，没有是不是最优，只有是不是最适合。

然后问问题之前最后搜索一下官网。

componentWillMount

componentWillMount() is invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead.

简单来说，就是在这里setState，可以避免一次额外的rendering，推荐可以用constructor代替

componentDidMount
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request

这里setState会引发一次额外的rendering，并且该方法只有第一次控件初始化时才会调用。

如果你的界面本身是基于数据返回来创建的，避免用户看到不友好的界面，那么你可以在constructor中去同步请求,并等待数据返回然后setState

如果你希望用户能尽快的看到界面，那么你可以在componentDidMount中去做网络请求，这样你会先渲染一次没有数据的界面，然后等待数据返回，会再rendering一次。

为什么react推荐第二种呢？因为网络请求不稳定，用户一直等待网络请求回来，再刷新界面。使用第一种的话，如果因为网络原因，用户可能回在空白页面呆的时间比较久，对用户不友好，所以从用户友好角度来讲，我们更愿意让用户先看到一个没有数据的方式，再通过一个spin的动画，来加载数据。