Create React App中如何在React渲染前加载闪屏界面？

我最近在用create-react-app（基于react-scripts）的项目里，碰到了两个烦人的问题：React加载完成前页面一片空白，还有初始渲染时元素偏移的情况。一开始我试着在index.tsx里直接加自定义div，结果根本显示不出来——后来才记起来index.html其实在/public文件夹里（多亏了Rishabh的提示！）。

最终我结合了两种方案，目前用下来效果最好，分享给大家：

方案1：React启动前先展示静态闪屏 #

直接修改public/index.html里的root容器，预先在里面放好闪屏内容，这样页面一加载就能立刻显示出来：

<div id="root">
  <div id="dimScreen">
    <img src="/img/logo.png" alt="加载中" />
  </div>
</div>

你可以给dimScreen写CSS把它设成全屏覆盖，背景用空白或者你需要的颜色，确保它占满整个视口，彻底避免初始空白。

方案2：在App组件中添加延迟隐藏的加载器 #

只靠静态闪屏还不够，因为React接管DOM后直接替换的话，还是可能出现瞬间的元素偏移。所以我在App.tsx里加了一个状态控制的加载器，让它多停留0.5-1秒，等页面元素渲染稳定后再隐藏：

import React, { Component } from 'react';
import Loader from './components/Loader'; // 假设你有自定义的Loader组件
import Header from './components/Header';
import MyComponent from './components/MyComponent';

class App extends Component {
  state = { loading: true };

  componentDidMount() {
    // 可根据实际页面加载速度调整延迟时长
    setTimeout(() => {
      this.setState({ loading: false });
    }, 1000);
  }

  render() {
    return (
      <React.Fragment>
        {this.state.loading ? (
          <Loader />
        ) : (
          <div className="app">
            <Header />
            <MyComponent />
          </div>
        )}
      </React.Fragment>
    );
  }
}

export default App;

这里的Loader组件可以和静态闪屏的样式保持一致，这样过渡会非常自然，完全解决了元素偏移的问题。

划重点：如果只在App.tsx里加加载器，还是会在界面加载前出现偏移——因为React初始化的瞬间还是会有短暂的空白或元素跳动，所以静态闪屏+组件内延迟加载器的组合才是最优解。

目前这个方案运行很稳定，如果之后发现问题或者有更好的优化方法，我会再来更新的！

内容的提问来源于stack exchange，提问作者Sonic Soul