reactjs中的ajax写在componentwillmount中不是更好吗？

Question

描述：

• 官方建议把ajax写到componentdidmount中，

• 在render之前，在componentwillmount中执行setState不会重新render

• 但是如果写在componentwillmount中的setState在render之后执行，比如设置了定时器，setState后，也会造成重新render

• 写在componentdidmount中的ajax，一定是在第一次render之后再render的

---

问题：

• 既然如上所述，那把ajax写在componentwillmount中不是更好吗？

理由：

1. 如果ajax的执行在render之前得到了值，并setState，那就执行一次render。

2. 如果在第一次render之后得到了值，那就如同componentdidmount一样再次render就行，这样有可能还省去一些render。

3. 虽然reactjs的diff算法很快，但两次的render肯定没有一次效率高

Answer 1

为什么不推荐在willMount中调用ajax？

在componentWillMount执行ajax，对ajax的结果进行setState,即使ajax的返回结果在render之前，也会引起新的render，不会和原来的state进行合并，进行一次render，为什么？
这就需要了解JavaScript的执行机制了，JavaScript是单线程，分为“当前线程”和任务队列。
ajax的执行结果会放到任务队列中，等主线程执行完后采取读取任务队列中的任务进行执行。
虽然setState也是异步的，但是他们不在同一个“任务单元”中，执行上下文已发生改变，所以是不可能被合并的。不仅在willmount中ajax回调中的setState不会和外面同步调用的setState合并，所以异步的回调都不会。
这样的话，就没必要在willmount中调用ajax，以避免理解不到位，对state的结果预计错误。didMount的执行很明了，不会引起歧义，所以在didMount中最合理了。

在willMount中调用ajax不是错误，只是不推荐。

Answer 2

那是因为服务端渲染时不会执行didmount的代码，把ajax写在此有利于同构

然后你说在第一次render之前得到值什么的，我本地测试都不会有这样的事情发生，更何况在一个实际环境中

Answer 3

在同构的情况下，生命周期会到componentwillmount，这样使用ajax就会出错，所以之前一个比较好的解决方案是将ajax放在组件挂载的页面上时再去拉取数据，不过目前的解决方案就是利用fetch，有时候考虑问题要在大的方面上啊！还有就是，考虑用户体验，假如向你说的放在componentwillmount中，那么没有数据过来时就是白屏，而放在didmount中可以有一个初始的状态