反应-在渲染DOM时显示加载屏幕吗? [英] React - Display loading screen while DOM is rendering?

问题描述

这是来自Google Adsense应用程序页面的示例.在首页之前显示的加载屏幕在首页之后显示.

This is an example from Google Adsense application page. The loading screen displayed before the main page showed after.

我不知道如何使用React来做同样的事情，因为如果我使加载屏幕由React组件呈现，它在页面加载时不会显示，因为它必须等待之前呈现的DOM.

I don't know how to do the same thing with React because if I make loading screen rendered by React component, it doesn't display while page is loading because it has to wait for DOM rendered before.

已更新:

我通过将屏幕加载程序放入index.html并在React componentDidMount()生命周期方法中将其删除来举例说明了我的方法.

I made an example of my approach by putting screen loader in index.html and remove it in React componentDidMount() lifecycle method.

示例和推荐答案

这可以通过将加载图标放在html文件(例如index.html，例如ex)中来完成，以便用户在html文件包含后立即看到该图标.已加载.

This could be done by placing the loading icon in your html file (index.html for ex), so that users see the icon immediately after the html file has been loaded.

当您的应用程序完成加载后，您只需在生命周期挂钩中删除该加载图标，我通常在componentDidMount中执行该操作.

When your app finishes loading, you could simply remove that loading icon in a lifecycle hook, I usually do that in componentDidMount.

这篇关于反应-在渲染DOM时显示加载屏幕吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！