首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Next.js: ComponentWillMount vs.

Next.js: ComponentWillMount vs.
EN

Stack Overflow用户
提问于 2017-11-24 02:47:43
回答 3查看 29.4K关注 0票数 55

我将Next.js用于我的React应用程序,因为它具有服务器端呈现功能。正如我通过日志检查的那样,ComponentWillMountgetInitialProps方法都在服务器端运行。这些方法之间有什么不同吗?

我应该什么时候在ComponentWillMount中运行,什么时候我应该在getInitialProps中运行

我没看到Next.js提到过这件事。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-11-24 03:50:37

GetInitialProps

  1. GetInitialProps通常是一个异步函数,它适合于服务器上的异步操作,并将数据作为属性传递到页面。

  1. In Next.js它始终在服务器上运行,如果使用链接调用页面,则只在客户端调用它。

  1. 它只能在页面中使用,而不能在组件中使用。

ComponentWillMount

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

  1. 它既可以在组件中调用,也可以在页面中调用。它不是进行异步调用的好地方,因为它不等待异步操作完成。因此,如果它在服务器上运行,而您的异步操作已写入其中,则它将无法完成,并且它到达客户端时不会获得数据。
票数 21
EN

Stack Overflow用户

发布于 2018-05-20 05:39:01

警告

50%的被接受的答案是错误的。这就是为什么。让我把我的答案分成两部分:

第1部分:

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

  1. In Next.js它总是在服务器上运行,如果页面是使用链接调用的,那么它只在客户端

上被调用

错误的,GetInitialProps在上被执行服务器浏览器(记住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 to work on both server and the client. So, Next.js can use it on both client and server.

第2部分:

第二部分是更准确地回答实际问题。很明显,OP混淆了ComponentDidMountComponentWillMount.因为在Next.js的情况下,比较GetInitialProps和ComponentDidMount更有意义,因为它们都能够进行异步调用来获取数据,并且都允许事后呈现(在ComponentWillMount).的情况下,这是而不是

在任何情况下,您使用其中一个或另一个,有一些区别:

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

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

你可能会问:‘那么我应该在什么时候使用这个或那个?’。实际上,它非常令人困惑,同时也非常简单。这是一条经验法则:

当您的组件充当页面,并且您希望将数据作为属性提供时,

  • 使用GetInitialProps来获取数据。
  • 对子组件(不是页面)使用ComponentDidMount,或者当您希望在Ajax调用时更新状态时使用ComponentDidMount。
票数 128
EN

Stack Overflow用户

发布于 2017-11-24 02:55:52

componentWillMount is the Component Lifecycle methods。

根据documentation的说法

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47461803

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档