Nextjs:ComponentWillMount vs getInitialProps

Question

我正在使用next.js作为我的React应用程序,因为它具有服务器端呈现.正如我检查的日志,这两种方法ComponentWillMount并getInitialProps都在服务器端运行.所以我的问题是:这些方法之间有什么区别吗？当我应该运行在ComponentWillMount和我时,应在运行getInitialProps.我没有看到Next.JS提到这件事.

Answer 1

警告 50%的接受答案是错误的,这就是为什么,让我将我的答案分为两部分:

第1部分:

1. GetInitialProps通常是一个异步函数,它适用于服务器上的异步操作,并将数据作为props传递给页面.

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

错误,GetInitialProps在BOTH 服务器和浏览器上执行(记住Next.js的目标是制作通用JavaScript),这是文档所说的:

有了它,我们可以通过远程数据源获取给定页面的数据,并将其作为道具传递给我们的页面.我们可以编写getInitialProps来在服务器和客户端上工作.因此,Next.js可以在客户端和服务器上使用它.

第2部分:

第二部分是更准确地回答实际问题,显然OP在ComponentDidMount和ComponentWillMount之间混淆了.因为在Next.js情况下,它更有意义GetInitialProps VS ComponentDidMount比较,因为它们都能够进行异步调用来获取数据,而且他们也都允许渲染之后(这是没有可能的情况下ComponentWillMount).

在任何情况下,您使用一个或另一个,差异很小:

GetInitialProps:由Next.js提供,并不总是被触发,所以要小心,当你将1个组件包装在另一个组件中时会发生这种情况.如果父组件具有GetInitialProps,则永远不会触发子项的GetInitialProps,请参阅此线程以获取更多信息.

ComponentDidMount:是React实现,它总是在浏览器上触发.

你可能会问,'所以我什么时候应该使用这个或那个',实际上它非常混乱,同时非常简单,这是一个经验法则:

• 当组件充当页面时,使用GetInitialProps获取数据,并且您希望将数据作为Props提供.
• 在子组件(不是Pages)上使用ComponentDidMount,或者在Ajax调用时更新状态.

Answer 2

GetInitialProps

1. GetInitialProps通常是一个异步函数,它适用
   于服务器上的异步操作,并将数据作为props传递给页面.

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

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

ComponentWillMount

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

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