这是谷歌Adsense应用页面的一个例子。主页之前显示的加载屏幕在主页之后显示
我不知道如何使用React做同样的事情，因为如果我使用React组件呈现加载屏幕，页面加载时它不会显示，因为它必须在加载之前等待DOM呈现
已更新：
我以我的方法为例，将屏幕加载程序放入index.html中，并在ReactcomponentDidMount（）lifecycle方法中删除它
示例和反应加载屏幕
目标
呈现html页面时，立即显示微调器（当React加载时），并在React准备就绪后隐藏它
由于微调器是在纯HTML/CSS中呈现的（在React域之外），React不应该直接控制显示/隐藏过程，实现应该是透明的
解决方案1：空的伪类
由于将react渲染到DOM容器中-<；div id=“应用程序”></部门>，可以将微调器添加到该容器中，当react加载并渲染时，微调器将消失
不能在react根目录中添加DOM元素（例如div），因为只要调用ReactDOM.render（），react就会替换容器的内容。即使渲染null，内容仍将替换为注释-<；！--反应为空：1-->。这意味着，如果您希望在主组件装载时显示加载器，数据正在装载，但实际上没有呈现任何内容，则放置在容器中的加载器标记（例如，<；div id=“app”>；<；div class=“loader”>；<；/div>；）将不起作用
解决方法是将微调器类添加到react容器中，并使用：empty伪类。只要容器中没有呈现任何内容（注释不计算），微调器就会可见。只要react呈现的不是注释，加载程序就会消失
示例1
在本例中，您可以看到一个组件在准备就绪之前呈现null。容器也是加载器-<；div id=“app”class=“app”></部门>，并且加载程序的类只有在：为空时才能工作（请参见代码中的注释）：
类应用程序扩展React.Component{
状态={
加载：正确
};
componentDidMount（）{
//这将模拟一个异步操作，之后组件将呈现内容
demoAsyncCall（）.then（（）=>；this.setState（{loading:false}））；
}
render（）{
const{loading}=this.state；
如果（正在加载）{//如果组件不必等待异步操作，请删除此块
返回null；//应用程序未就绪时呈现null
}
返回(
<；div>；我就是应用程序<；/div>；
);
}
}
函数demoAsyncCall（）{
返回新承诺（（resolve）=>；setTimeout（（）=>；resolve（），2500））；
}
ReactDOM.render(
<；应用程序/>；，
document.getElementById（'app'）
);。加载程序：空{
位置：绝对位置；
顶部：钙（50%-4em）；
左：钙（50%-4em）；
宽度：6em；
身高：6em；
边框：1.1米实心rgba（0,0,0,0.2）；
左边框：1.1米实心#000000；
边界半径：50%；
动画：load8 1.1s无限线性；
}
@关键帧加载8{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}<；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js“></脚本>；
<；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js“></脚本>；
<；div id=“app”class=“loader”></部门><；！--将类加载器添加到容器-->示例2
使用：empty伪类显示/隐藏选择器的一种变体是将微调器设置为应用程序容器的同级元素，并使用相邻同级组合符（+）在容器为空时显示它：
类应用程序扩展React.Component{
状态={
加载：正确
};
componentDidMount（）{
//这将模拟一个异步操作，之后组件将呈现内容
demoAsyncCall（）.then（（）=>；this.setState（{loading:false}））；
}
render（）{
const{loading}=this.state；
如果（正在加载）{//如果组件不必等待异步数据，请删除此块
返回null；//应用程序未就绪时呈现null
}
返回(
<；div>；我就是应用程序<；/div>；
);
}
}
函数demoAsyncCall（）{
返回新承诺（（resolve）=>；setTimeout（（）=>；resolve（），2500））；
}
ReactDOM.render(
<；应用程序/>；，
document.getElementById（'app'）
);\app:not（：empty）+.sk立方体网格{
显示：无；
}
.sk立方体网格{
宽度：40px；
高度：40px；
保证金：100像素自动；
}
.sk多维数据集网格.sk多维数据集{
宽度：33%；
身高：33%；
背景色：#333；
浮动：左；
动画：sk cubeGridScaleDelay 1.3s无限轻松输入输出；
}
.sk立方体网格.sk-cube1{
动画延迟：0.2s；
}
.sk立方体网格.sk-cube2{
动画延迟：0.3s；
}
.sk立方体网格.sk-cube3{
动画延迟：0.4s；
}
.sk立方体网格.sk-cube4{
动画延迟：0.1s；
}
.sk立方体网格。sk-cube5{
动画延迟：0.2s；
}
.sk立方体网格。sk-cube6{
动画延迟：0.3s；
}
.sk立方体网格.sk-cube7{
动画延迟：0s；
}
.sk立方体网格.sk-cube8{
动画延迟：0.1s；
}
.sk立方体网格。sk-cube9{
动画延迟：0.2s；
}
@关键帧sk cubeGridScaleDelay{
0%,
70%,
100% {
变换：scale3D（1,1,1）；
}
35% {
变换：scale3D（0,0,1）；
}
}<；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js“></脚本>；
<；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js“></脚本>；
<；div id=“应用程序”></部门>；
<；！--将类加载器添加到容器-->；
<；div class=“sk立方体网格”>；
<；div class=“sk多维数据集sk-cube1”></部门>；
<；div class=“sk cube sk-cube2”></部门>；
<；div class=“sk cube sk-cube3”></部门>；
<；div class=“sk cube sk-cube4”></部门>；
<；div class=“sk多维数据集sk-cube5”></部门>；
<；div class=“sk多维数据集sk-cube6”></部门>；
<；div class=“sk多维数据集sk-cube7”></部门>；
<；div class=“sk多维数据集sk-cube8”></部门>；
<；div class=“sk多维数据集sk-cube9”></部门>；
</部门>解决方案2将微调器“处理程序”作为道具传递
要对微调器显示状态进行更细粒度的控制，请创建两个函数showSpinner和hideSpinner，并通过props将它们传递给根容器。这些函数可以操纵DOM，或者执行控制微调器所需的任何操作。这样，React不知道“外部世界”，也不需要直接控制DOM。您可以轻松地替换用于测试的函数，或者如果需要更改逻辑，您可以将它们传递给React树中的其他组件
示例1
const loader=document.querySelector（'.loader'）；
//如果要在React再次加载数据时显示加载程序
常量showLoader=（）=>；loader.classList.remove（'loader--hide'）；
常量hideLoader=（）=>；loader.classList.add（'loader--hide'）；
类应用程序扩展了React.Component{
componentDidMount（）{
this.props.hideLoader（）；
}
render（）{
返回(
<；div>；我就是应用程序<；/div>；
);
}
}
//setTimeout模拟响应加载所需的时间，它不是解决方案的一部分
设置超时（（）=>；
//显示/隐藏函数作为道具传递
ReactDOM.render(
<；应用程序
hideLoader={hideLoader}
showLoader={showLoader}
/>；，
document.getElementById（'app'）
)
, 1000);.loader{
位置：绝对位置；
顶部：钙（50%-4em）；
左：钙（50%-4em）；
宽度：6em；
身高：6em；
边框：1.1米实心rgba（0,0,0,0.2）；
左边框：1.1米实心#000000；
边界半径：50%；
动画：load8 1.1s无限线性；
过渡：不透明度0.3s；
}
.loader--隐藏{
不透明度：0；
}
@关键帧加载8{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}<；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js“></脚本>；
<；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js“></脚本>；
<；div id=“应用程序”></部门>；
<；div class=“装载机”></部门>示例2-挂钩
本例使用useffect钩子隐藏微调器