React componentwillmount和componentdidmount請求資料

摘要： 1.清楚呼叫順序 2.componentWillMount的問題 這個方法正確呼叫的時候是在component第一次render之前,所以第一眼看上去覺得就應該在這裡去fetch datas. 但是這裡有個問題,在非同步請求資料中這一次返回的是空資料（null）,因為...

1.清楚呼叫順序

2.componentWillMount的問題

這個方法正確呼叫的時候是在component第一次render之前,所以第一眼看上去覺得就應該在這裡去fetch datas.

但是這裡有個問題,在非同步請求資料中這一次返回的是空資料（null）,因為是非同步的,請求需要時間,但render不會等你慢慢請求.所以在渲染的時候沒有辦法等到資料到來.正確的處理方式就不要在這裡請求資料,而是讓元件的狀態（state）在這裡正確的初始化.

順便說一句在es6中,使用extend component的方式裡的constructor函式和componentWillMount是通用的作用,所以你在建構函式裡初始化了元件的狀態就不必在WillMount做重複的事情了.

3.componentdidmount的優點

componentDidMount呢?這個生命週期函式在是在render之後呼叫一次,component已經初始化完成了.

在生產時,componentDidMount生命週期函式是最好的時間去請求資料,其中最重要原因:使用componentDidMount第一個好處就是這個一定是在元件初始化完成之後,再會請求資料,因此不會報什麼警告或者錯誤,我們正常請教資料完成之後一般都會setState.