react ajax 两次 dom,【React】为什么react一般在componentDidMount发送ajax，而vue一般在created发送ajax？...

react官方文档建议我们在componentDidMount阶段请求后台数据

this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

vue官方例子却在created阶段请求数据 https://cn.vuejs.org/v2/examp…

为什么不在mounted阶段？

到底在哪个阶段请求数据初始化界面最佳？

回答

关于react为什么推荐在DidMount中发送请求可以看下这个：

https://stackoverflow.com/que…

个人愚见：

之所以react推荐在componentDidMount钩子中使用而不是componentWillMount的原因：因为请求是异步的，所以无论你放在两个中的任何一个里面，几乎绝对都会在组件渲染之后，再进行数据渲染，也就是说避免不了二次渲染(第一次渲染为默认值，第二次为请求后的数据渲染)，所以效果上放到哪里都一样，但是在DidMount中可以使用refs了。然后重要的是(是在Stack Overflow中的回答看到)：未来的react版本可能会对componentWillMount进行调整，可能在某些情况下触发多次，所以官方是推荐在componentDidMount中进行请求。 当然放到willMount中可能会快那么几毫秒，毕竟先运行嘛。。。

vue的渲染前的钩子函数比react多两个：beforeCreat与created。而vue的例子为什么在created中写的，可能是因为是个demo也没有考虑那么多。一样的道理，无论放到beforeCreat、created或者beforeMount中也同样避免不了二次渲染，差别也可能是那么几毫秒

created阶段，页面template已经渲染，但是data里面的变量还没挂载到template上面；

mounted阶段，页面template已经渲染，data里面的变量已经挂载到template上面；

两个阶段发送请求，对渲染结果无影响，

但是created会比mounted快请求那么一点点

所以一般在created阶段请求数据

//created

{{a}}

//mounted

hi

data(){

return {

a:'hi'

}

综合楼上componentDidMount实在页面第一次渲染之后，这个时候插入数据是最好的，componentWillMountWill一般实在页面渲染之前做一些处理

react的componentDidMount被调用的时候，组件已经被装载到DOM树上了，可以放心获取渲染出来的任何DOM，所以在这个阶段用AJAX获取数据来填充组件内容更为妥当。

对比一下：

created：获取数据→组件DOM渲染→填充数据

componentDidMount：组件DOM渲染→获取填充数据

个人认为在组件挂载到DOM以后再请求数据并填充更好一点。

当然也不是绝对。