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() 。 这是在服务器渲染上调用的唯一生命周期钩子。