1. 程式人生 > >React請求資料為什麼要在componentDidMount方法裡面做?

React請求資料為什麼要在componentDidMount方法裡面做?

轉載自:https://segmentfault.com/q/1010000008133309/a-1020000008135702

這與React元件的生命週期有關,元件掛載時有關的生命週期有以下幾個:

  • constructor()

  • componentWillMount()

  • render()

  • componentDidMount()

上面這些方法的呼叫是有次序的,由上而下,也就是當說如果你要獲取外部資料並載入到元件上,只能在元件"已經"掛載到真實的網頁上才能作這事情,其它情況你是載入不到元件的。

componentDidMount方法中的程式碼,是在元件已經完全掛載到網頁上才會呼叫被執行,所以可以保證資料的載入。此外,在這方法中呼叫setState方法,會觸發重渲染。所以,官方設計這個方法就是用來載入外部資料用的,或處理其他的副作用程式碼。

constructor被呼叫是在元件準備要掛載的最一開始,所以此時元件尚未掛載到網頁上。

componentWillMount方法的呼叫在constructor之後,在render之前,在這方法裡的程式碼呼叫setState方法不會觸發重渲染,所以它一般不會用來作載入資料之用,它也很少被使用到。

一般的從後臺(伺服器)獲取的資料,都會與元件上要用的資料載入有關,所以都在componentDidMount方法裡面作。雖然與元件上的資料無關的載入,也可以在constructor裡作,但constructor是作元件state初紿化工作,並不是設計來作載入資料這工作的,所以所有有副作用的程式碼都會集中在componentDidMount方法裡。