这是谷歌Adsense应用页面的一个例子.主页之前显示的加载屏幕在主页之后显示.

enter image description here

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

Updated:

我以我的方法为例,将screen loader放入index.html,并在React componentDidMount() lifecycle method中删除它.

Examplereact-loading-screen.

推荐答案

这可以通过在html文件(index.html for ex)中放置加载图标来实现,这样用户在加载html文件后就可以立即看到该图标.

当你的应用程序完成加载时,你可以简单地删除生命周期挂钩中的加载图标,我通常在componentDidMount分钟内完成.

Reactjs相关问答推荐

useReducer和带有回调的useState之间是否有实际区别?

如何在Pivot模式下自定义标题?

如何使用react-router-dom导航到网页中的其他路由?

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

在react中向数组状态添加值时出错

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

为什么Next.js 14无法解析页面路由路径?

在REACT-RUTER-DOMV6中使用通用页面包装组件有问题吗?

找不到名称setCometChat

React对象值下降2次而不是1次

在 React-Select 中显示多值的倒序

根据其中的值不同地react setState 更新状态

使用 toast 时挂钩调用无效

顶点图表甜甜圈项目边框半径

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书?.img? /*#__PURE__*/React.createElement("img",

Wordpress 插件在激活时创建一个 React Public 页面

Reactjs 表单未反映提交时的更改

加密 Django Rest Framework API 响应 + 解密响应应用程序中的响应

当我在其中传递 2 个箭头函数时,为什么我的 onClick 事件不适用于 useState

哪个 PrivateRouter 实现更好:高阶组件还是替换?