React 未准备好时显示自定义加载屏幕

React 2年前 68

在您的 React 应用程序准备好并能够渲染其组件之前，有一段时间只有您的 HTML 和 CSS 可以工作。如果您的用户的互联网速度很快，那么那个时期几乎无法辨认。但是，如果他们的网速真的很慢，我们这里就有一个大问题。用户可能会因为不知道发生了什么而感到恼火，并且可能会失去耐心并离开您的 Web 应用程序。

解决此问题的一个简单但有效的方法是添加一个自定义加载屏幕，当您的 HTML 文件被渲染时，该屏幕会立即显示。

重点是什么？

诀窍很简单，我们无需编写大量代码即可实现目标。只需关注您的public/index.html文件。将自定义加载器添加到根<div>元素中：

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <!-- Implement the custom loader page here -->
    <div class="my-loader-page"> 
       <!-- add your loader (icon, GIF, SVG, CSS animations, etc) here -->
    </div>
  </div>
</body>

一开始，将显示自定义加载程序。但是，当 React 准备就绪时，

中的所有内容都将自动替换为 JSX 组件。这种行为使我们的生活变得更加轻松，因为我们不必编写任何逻辑来在完成任务时删除我们的加载器。如果您仍然感到困惑和模糊，让我们来看看下面完整的工作示例。

完整示例

应用预览

在此示例中，我们将仅从纯 CSS 创建自定义微调器。请注意，要清楚地观察开发环境中的加载屏幕，您必须打开Chrome DevTools，选择Network选项卡，然后通过选择Slow 3G或Fast 3G来限制互联网速度。

这就是它在实践中的工作方式：

React 未准备好时显示自定义加载屏幕

代码

创建一个全新的 React 项目：

npx create-react-app custom-loading-screen-example

转到 <您的项目目录>/public/index.html并将默认代码替换为以下内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>KindaCode.com</title>

  <!-- Add this CSS to style the custom loader -->
  <style>
    .my-loader-page {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .my-loader {
      width: 100px;
      height: 100px;
      border: 10px solid #bbb;
      border-left: 10px solid blue;
      border-right: 10px solid blueviolet;
      border-radius: 50%;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <!-- Implement the custom loader here -->
    <!-- All elements inside the root diev will be replaced by React components when they are ready -->
    <div class="my-loader-page">
      <div class="my-loader"></div>
      <p>React isn't ready yet</p>
    </div>
  </div>
</body>

</html>

只关注部分中的 CSS 样式和

中的其他内容。

删除src/App.js中所有不需要的代码并添加：

// KindaCode.com
// src/App.js
import './App.css';

function App() {
  return (
    <div style={{ padding: 30 }}>
      <h1>Welcome To KindaCode.com</h1>
      <h3>React is now ready</h3>
    </div>
  );
}

export default App;