1. 程式人生 > >何處處理獲取資料邏輯:componentWillMount vs componentDidMount

何處處理獲取資料邏輯:componentWillMount vs componentDidMount

我們都很清楚,render不是一個很好的處理獲取資料或者任何非同步操作的位置,它在某種程度上會更改狀態或者導致一些其他影響

componentWillMount

React會在元件第一次執行render方法前執行這個方法,乍一看它時處理獲取資料邏輯的很完美的地方。但是我們一般都是通過非同步請求API的方式來獲取資料,這就意味著我們還沒有獲取到資料而render方法已經被執行了。我們沒有辦法暫停render的執行而依次來等待資料的到來。

componentDidMount

componentDidMount實在render被執行之後執行的,實際上componentDidMount時最好的獲取資料的位置。原因如下:

  1. componentDidMount是在元件初始化後才被執行的,這就需要我們正確的初始化state.否則將會出錯
  2. 如果你需要在伺服器端渲染應用程式,componentWillMount將被呼叫兩次。一次是在server端,一次在客戶端,但這並不是你想要的結果而將資料載入邏輯放在componentDidMount將確保資料只從客戶端獲取