我在componentDidMount
中将State show设置为true,并且在render中有一个if(this.state.show == true) return(components...)
,因此我希望在next.js完成页面加载时显示我的组件。
但由于某种原因,componentdidmount
在页面显示之前被调用,并且组件动画在页面仍在加载时开始。因此,当页面实际显示时,用户在页面中间捕捉到我不想要的动画。
我的静态文件夹有很多图片,所以我猜下一步是加载它们,这就是为什么它需要很长时间,但为什么componentDidMount
在页面完成加载之前被调用?(index.js的componentDidMount不是其呈现方法中的组件)
我禁用了组件的ssr,但它不起作用。我提到的页面没有从数据库中获取任何东西,也没有使用getInitialProps。它只是一个next.js页面,其呈现方法中包含组件。
顺便说一下,我注意到这种行为只有在生产,当应用程序实际部署到远程服务器,因为它需要时间来加载静态文件夹。
1条答案
按热度按时间7hiiyaii1#
基本上,
getInitialProps
将在调用componentDidMount
之前触发。您可以通过其中的
console.log
来证明这一点,因为您知道getInitialProps
的console.log
将登录到您的终端。要解释
componentDidMount
的意外行为,您需要:在react组件树中,componentDidMount()在所有子组件都被挂载之后被触发,这意味着任何组件的componentDidMount()在其父组件被挂载之前被触发。
因此,如果您想测量DOM位置和大小等,使用子组件的componentDidMount()是一个不安全的地方/时间。
在您的情况下:要从100%宽度/高度组件中获得准确的阅读,进行此类测量的安全位置是顶部React组件的componentDidMount()内部。2 100%是相对于父组件/容器的宽度/高度。3因此,只能在父组件也已安装后进行测量。
Quoted From .
此外,如果您依赖于
getInitialProps
中的load
事件,则应测量属性show
并将其作为来自getInitialProps
的属性发送,如下所示: