在 React 中我們應該在哪里發出 API 請求？

Question

我一直在ComponentDidMount生命周期中發出API's請求，並在回調中調用setState 。 但是在深入挖掘的過程中，我偶然發現我們不應該在這個生命周期中調用 setState ，因為它會再次觸發 render 方法，而 React 也不建議這樣做。

那么在這種情況下，我們到底應該在哪里發出請求並調用setState來使用結果呢？

Answer 1

您絕對應該在componentDidMount進行 API 調用。 不推薦的是重新渲染一個大的組件，而是你應該做的是將你的 UI 分解成小的邏輯組件，只重新渲染需要的部分，而不是整體。 例如，你有一個很大的命名組件HomeComponent其中有3個個小的元件稱為NavComponent ， BodyComponent和FooterComponent 。 你不應該調用從該API componentDidMount中的HomeComponent因為調用setState從HomeComponent將重新呈現內所有的小部件HomeComponent ，因為你知道，在導航欄或頁腳是不是需要重新渲染這是沒有必要的。 而不是來自BodyComponent ，因為只有身體部分需要重新渲染，因為它的狀態已經改變。 所以你應該從BodyComponent的componentDidMount調用 API，這樣你就只重新渲染需要的東西。

Answer 2

@Shababb Karim 是對的，但如果我要在我的項目中實現 API 調用，我會添加一個狀態管理庫。 Redux 是一種向應用程序實現全局狀態的好方法，您可以在其中設置來自所述 API 的數據。 所有需要該數據的組件都可以附加到 Redux 狀態以獲取它。

不過，在較小的項目中，Redux 可能會帶來一些開銷。 在這種情況下，還有其他選項，如 Flux（雖然我更喜歡 Redux）。