React componentwillmount和componentdidmount请求数据

栏目: IOS · Android · 发布时间: 5年前

内容简介:这个方法正确调用的时候是在component第一次render之前,所以第一眼看上去觉得就应该在这里去fetch datas.但是这里有个问题,在异步请求数据中这一次返回的是空数据(null),因为是异步的,请求需要时间,但render不会等你慢慢请求.所以在渲染的时候没有办法等到数据到来.正确的处理方式就不要在这里请求数据,而是让组件的状态(state)在这里正确的初始化.

1.清楚调用顺序

React componentwillmount和componentdidmount请求数据

2.componentWillMount的问题

这个方法正确调用的时候是在component第一次render之前,所以第一眼看上去觉得就应该在这里去fetch datas.

但是这里有个问题,在异步请求数据中这一次返回的是空数据(null),因为是异步的,请求需要时间,但render不会等你慢慢请求.所以在渲染的时候没有办法等到数据到来.正确的处理方式就不要在这里请求数据,而是让组件的状态(state)在这里正确的初始化.

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

3.componentdidmount的优点

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms Unlocked

Algorithms Unlocked

Thomas H. Cormen / The MIT Press / 2013-3-1 / USD 25.00

Have you ever wondered how your GPS can find the fastest way to your destination, selecting one route from seemingly countless possibilities in mere seconds? How your credit card account number is pro......一起来看看 《Algorithms Unlocked》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具