Next.js：ComponentWillMount 與 getInitialProps

Question

我將Next.js用於我的 React 應用程序，因為它具有服務器端渲染。 正如我通過日志檢查的那樣， ComponentWillMount和getInitialProps兩種方法都在服務器端運行。 這些方法之間有什么區別嗎？

什么時候應該在ComponentWillMount運行，什么時候應該在getInitialProps運行？

我沒有看到 Next.js 提到這件事。

Answer 1

警告

50% 的接受答案是錯誤的。 這是為什么。 讓我把我的答案分成兩部分：

第1部分：

1. GetInitialProps 通常是一個異步函數，它適用於服務器的異步操作，並將數據作為 props 傳遞到頁面。

2. 在 Next.js 中，它總是在服務器端運行，如果頁面是使用 Link 調用的，那么它只會在客戶端調用

錯誤，GetInitialProps 在服務器和瀏覽器上都被執行（記住 Next.js 的目標是制作通用的 JavaScript）。 以下是文檔中的內容：

有了這個，我們可以通過遠程數據源獲取給定頁面的數據，並將其作為道具傳遞給我們的頁面。 我們可以編寫我們的getInitialProps來在服務器和客戶端上工作。 因此，Next.js 可以在客戶端和服務器上使用它。

第2部分：

第二部分是更准確地回答實際問題。 很明顯，OP 混淆了ComponentDidMount和ComponentWillMount 。 因為在Next.js情況下，它更有意義的比較GetInitialProps與ComponentDidMount因為它們都能夠進行異步調用來獲取數據，而且他們也都允許渲染之后（這是不可能的ComponentWillMount的情況下）。

在任何情況下，您使用一種或另一種，都存在一些差異：

GetInitialProps ：由 Next.js 提供，它並不總是被觸發，所以要小心。 當您將一個組件包裝在另一個組件中時，就會發生這種情況。 如果父組件有 GetInitialProps，則永遠不會觸發子組件的 GetInitialProps。 有關更多信息，請參閱此線程。

ComponentDidMount ：是 React 的實現，它總是在瀏覽器上觸發。

您可能會問：“那么我什么時候應該使用這個或那個？”。 實際上，它非常令人困惑，同時又非常簡單。 這是一個經驗法則：

• 當您的組件充當頁面並且您希望將數據作為 Props 提供時，使用 GetInitialProps 來獲取數據。
• 在子組件（不是頁面）上使用 ComponentDidMount，或者當您想在 Ajax 調用時更新狀態時使用。

Answer 2

獲取初始道具

1. GetInitialProps 通常是一個異步函數，它適用於服務器的異步操作，並將數據作為 props 傳遞到頁面。

2. 在 Next.js 中，它總是在服務器端運行，如果頁面是使用 Link 調用的，那么它只會在客戶端調用。

3. 它只能在頁面中使用，不能在組件中使用。

組件掛載

1. 它是一個生命周期鈎子。 它在調用 render 方法之前被調用。 在其中獲取的數據不能作為 prop 傳入。

2. 它可以在組件和頁面中調用。 這不是進行異步調用的好地方，因為它不會等待異步操作完成。 因此，如果它在服務器上運行並且您的異步操作寫入其中，它將無法完成，並且在沒有獲取數據的情況下到達客戶端。

Answer 3

componentWillMount是組件生命周期方法。

根據文檔

componentWillMount()在掛載發生前立即被調用。 它在render()之前調用，因此在此方法中同步調用setState()不會觸發額外的渲染。 通常，我們建議改用constructor() 。 避免在此方法中引入任何副作用或訂閱。 對於這些用例，請改用componentDidMount() 。 這是在服務器渲染上調用的唯一生命周期鈎子。