Nextjs：ComponentWillMount vs getInitialProps

Question

我使用next.js作为我的React应用，因为它有服务器端呈现。当我通过日志检查时，方法ComponentWillMount和getInitialProps都在服务器端运行。所以我的问题是：这些方法之间有什么区别吗？我应该何时在ComponentWillMount中投放，何时应该在getInitialProps中投放。我没有看到Next.JS提到这件事。

Answer 1

警告 50％的接受答案在这里是错误的，为什么，让我将我的答案分为两部分：

第1部分：

  

  

1. GetInitialProps通常是一个非常好的异步函数   服务器上的异步操作，并将数据传递给页面   道具。

  

2. 在nextJs中，它总是在服务器上运行，如果使用Link调用页面，那么它只在客户端调用

  

错误，GetInitialProps在 BOTH 服务器和浏览器上执行（请记住Next.js的目标是制作通用JavaScript），这是文档所说的：

  

With that, we can fetch data for a given page via a remote data source and pass it as props to our page. We can write our getInitialProps to work on both server and the client. So, Next.js can use it on both client and server.

第2部分：

第二部分是更准确地回答实际问题，很明显OP在 ComponentDidMount 和 ComponentWillMount 之间感到困惑。因为在Next.js情况下，比较GetInitialProps VS ComponentDidMount更有意义，因为它们都能够进行异步调用以获取数据，并且它们也都允许后续渲染（在这种情况下不可能） ComponentWillMount ）。

无论如何你使用其中一种，差别很小：

GetInitialProps ：由Next.js提供，并不总是被触发，所以要小心，当你将1个组件包装在另一个组件中时会发生这种情况。如果父组件具有GetInitialProps，则永远不会触发子项的GetInitialProps，有关详细信息，请参阅this thread。

ComponentDidMount ：是React实施，它总是在浏览器上触发。

你可能会问，“所以我何时应该使用这个或那个＆＃39;，实际上它非常混乱，同时非常简单，这是一个经验法则：

• 当您的组件充当页面时，使用GetInitialProps获取数据，并且您希望将数据作为道具提供。
• 在子组件（不是Pages）上使用ComponentDidMount，或者在Ajax调用时更新状态。

Answer 2

<强> GetInitialProps

1. GetInitialProps通常是一个异步函数，适用于
   服务器上的异步操作，并将数据传递给页面 道具。

2. 在nextJs中，它总是在服务器上运行，如果使用Link调用页面，则只在客户端调用它。

3. 它只能用于不在组件中的页面。

ComponentWillMount

1. 它是一个生命周期钩子，它在调用render方法之前被调用。在其中获取的数据不能作为prop传递。

2. 可以在组件和页面中调用它。它不是一个进行异步调用的好地方，因为它不等待异步操作完成。因此，如果它在服务器上运行并且您的异步操作被写入其中..将无法完成，它将在没有获取数据的情况下进入客户端。

Answer 3

componentWillMount 组件生命周期方法。

根据documentation

在安装发生之前立即调用

componentWillMount()。它在render()之前调用，因此在此方法中同步调用setState()不会触发额外的渲染。通常，我们建议您使用constructor()。 避免在此方法中引入任何副作用或订阅。对于这些用例，请改用componentDidMount()。 这是服务器渲染上唯一的生命周期钩子。