react http請求放在哪

react http請求應該放在componentDidMount中去操作，這是對於非同步請求來說的；而對於同步的狀態改變，react網路請求可以放在componentWillMount中，一般用的比較少。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react http請求放在哪裡？ React網路請求到底該放在哪個生命週期？

總的來說，對於非同步請求，最好放在componentDidMount中去操作，對於同步的狀態改變，可以放在componentWillMount中，一般用的比較少。

如果認為在componentWillMount裡發起請求能提早獲得結果，這種想法其實是錯誤的，通常componentWillMount比componentDidMount早不了多少微秒，網絡上任何一點延遲，這一點差異都可忽略不計。

看看react的生命週期：

constructor() ----> componentWillMount() ----> render() ----> componentDidMount()

上面這些方法的呼叫是有次序的，由上而下依序呼叫。

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

componentWillMount方法的呼叫在constructor之後，在render之前，在這方法裡的程式碼呼叫setState方法不會觸發重新render，所以它一般不會用來作載入資料之用。

componentDidMount方法中的程式碼，是在元件已經完全掛載到網頁上才會被呼叫被執行，所以可以確保資料的載入。此外，在這方法中呼叫setState方法，會觸發重新渲染。所以，官方設計這個方法就是用來載入外部資料用的，或是處理其他的副作用程式碼。與元件上的資料無關的加載，也可以在constructor裡做，但constructor是做元件state初紿化工作，並不是做載入資料這工作的，constructor裡也不能setState，還有載入的時間太長或者出錯，頁面就無法載入出來。所以有副作用的程式碼都會集中在componentDidMount方法裡。

總結：

1.跟伺服器端渲染（同構）有關係，如果在componentWillMount裡面取得數據，fetch data會執行兩次，一次在伺服器端一次在客戶端。在componentDidMount可以解決這個問題，componentWillMount同樣也會render兩次。

2.在componentWillMount中fetch data，資料一定在render後才能到達，如果你忘了設定初始狀態，使用者體驗不好。

3.react16.0以後，componentWillMount可能會被執行多次。

推薦學習：《react影片教學》

以上是react http請求放在哪的詳細內容。更多資訊請關注PHP中文網其他相關文章！