React应用加载屏显示时如何同步加载后台DOM元素

问题根源 #

原有代码通过三元运算符做互斥条件渲染：加载状态下仅挂载LoadingScreen组件，应用主体（Header、路由页面、Footer）完全不参与渲染，直到3500ms计时结束才开始挂载主体节点。这种逻辑本质是延迟渲染应用内容，而非在加载屏覆盖下提前完成主体加载。

实现方案 #

核心逻辑是取消互斥渲染，改为同时挂载应用主体和加载屏，通过CSS层级控制加载屏的覆盖效果，全程使用React Hooks实现，无需编写类组件：

• 应用主体从组件首次挂载开始就正常渲染，在加载屏下层提前完成DOM绘制、资源加载
• 加载屏使用固定定位悬浮在视口最上层，完全遮挡下层内容
• 3500ms计时结束后修改加载状态，隐藏或卸载加载屏，直接露出已经加载完成的主体内容
• 空依赖的useEffect等价于类组件的componentDidMount生命周期，会在组件首次挂载后触发计时逻辑

修正代码 #

App组件核心逻辑 #

import * as React from 'react';
import './App.css';
import { Routes, Route } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { useState, useEffect } from 'react';

import LoadingScreen from './components/loading';
import Header from './components/header';
import Footer from './components/footer';
import Index from './components/index/index-page';
import Projects from './components/projects/projects-page';

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3500);
    // 组件卸载时清除定时器，避免内存泄漏和无效状态更新
    return () => clearTimeout(timer);
  }, [])

  return (
    <>
      {/* 应用主体始终渲染，在加载屏下层提前完成加载 */}
      <Header />
      <Routes>
        <Route path="/" element={<Index />}/>
        <Route path="/projects" element={<Projects />}/>
      </Routes>
      <Footer />

      {/* 加载屏悬浮在最上层，加载完成后直接卸载 */}
      {loading && <LoadingScreen />}
    </>
  );
}

export default App;

加载屏必要样式 #

给LoadingScreen组件的根元素添加以下样式，实现全屏覆盖效果：

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* 保证层级高于所有页面内容 */
  background: #ffffff; /* 替换为项目设计对应的加载屏背景色，避免透出下层内容 */
}

可选优化 #

• 如果需要加载完成的平滑淡出效果，不要直接卸载加载屏，可以先给加载屏加透明度过渡类名，等动画执行完成后再卸载节点
• 如果不需要固定3500ms加载时长，可以把定时器逻辑替换为页面资源加载监听：比如监听window.load事件，或者跟踪核心接口、图片资源的加载完成状态，再关闭加载屏
• 如果加载屏本身有复杂动画逻辑，注意不要阻塞下层主体内容的渲染线程

内容的提问来源于stack exchange，提问作者Josh Haywood