React componentwillmount和componentdidmount请求数据

1.清楚调用顺序

React componentwillmount和componentdidmount请求数据_第1张图片

2.componentWillMount的问题

在componentWillMount中执行this.setState是不会触发二次渲染的。

它也只会在挂载过程中被调用一次,它的作用和constructor没有太大差异。有很多人在componentWillMount中请求后台数据,认为这样可以更早的得到数据,componentWillMout是在render函数执行前执行的,虽然请求是在第一次render之前发送的,但是返回并不能保证在render之前完成。render不会等你慢慢请求.所以在渲染的时候没有办法等到数据到来再去setState触发二次渲染.

仔细思考一下,componentWillMount好像没啥卵用了。正所谓存在即合理,在服务端渲染的场景中componentDidMount是不会被执行的,因此可以在componnetWillMount中发生AJAX请求。

顺便说一句在es6中,使用extend component的方式里的constructor函数和componentWillMount是通用的作用,所以你在构造函数里初始化了组件的状态就不必在WillMount做重复的事情了.

React中不推荐在componentWillMount中发送异步请求。

3.componentdidmount的优点

componentDidMount呢?这个生命周期函数在是在render之后调用一次,component已经初始化完成了.

在生产时,componentDidMount生命周期函数是最好的时间去请求数据,其中最重要原因:使用componentDidMount第一个好处就是这个一定是在组件初始化完成之后,再会请求数据,因此不会报什么警告或者错误,我们正常请教数据完成之后一般都会setState.

你可能感兴趣的