在页面加载之前调用 Next.js CompononentDidMount

Question

我在componentDidMount 中将 setState 显示为 true，并且在渲染内部有一个 if(this.state.show == true) return(components...)，所以我想要的是当 next.js 完成页面加载时应该显示我的组件。

但由于某种原因，componentdidmount 在页面显示之前被调用，并且组件动画在页面仍在加载时开始。所以当页面实际显示时，用户在它的中间捕捉到我不想要的动画。

我的静态文件夹有很多图像，所以我想接下来是加载它们，这就是为什么它需要很长时间，但为什么在页面完成加载之前调用componentDidMount？ （index.js 的 componentDidMount 不是其渲染方法中的组件）

我为组件禁用了 ssr，但它不起作用。我提到的页面没有从数据库中获取任何内容，并且没有使用 getInitialProps。它只是一个 next.js 页面，其渲染方法中有组件。

顺便说一句，我只在生产中注意到这种行为，当应用程序实际部署到远程服务器时，因为加载静态文件夹需要时间。在本地主机上，这种行为并不明显。

Answer 1

基本上，getInitialProps 会在 componentDidMount 被调用之前触发。

您可以通过console.log 在其中的每一个中证明这一点，知道getInitialProps 的console.log 将在您的终端中登录。

解释componentDidMount您的意外行为：

在 react 组件树中，componentDidMount() 在所有子组件也都安装后被触发。这意味着，任何组件的 componentDidMount() 都会在其父组件被挂载之前被触发。

因此，如果您想测量 DOM 位置和大小等，请使用 子组件的 componentDidMount() 是不安全的地方/时间 这样做。

在您的情况下：从 100% 宽度/高度获得准确读数 组件，一个安全的地方进行这样的测量将在内部 顶部反应组件的 componentDidMount()。 100% 是宽度/高度 相对于父/容器。所以只能进行测量 在也安装了父级之后。

Quoted From.

此外，如果您依赖于来自 getInitialProps 的 load 事件，则应测量属性 show 并将其作为来自 getInitialProps 的道具发送，如下所示：

class Comp extends React.Component {
  async getInitialProps() {
    const loadableData = await ...loadingevent;
    return {
      show: !!loadableData.data //will return true when the data arrives
    }
  }
}

render(){
  const { show } = this.props;
  if(!show) {
    return <Loading />
  } else {
    return <SomethingElse />
  }
}