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

在您的 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 3GFast 3G来限制互联网速度。

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

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

代码

  1. 创建一个全新的 React 项目:
npx create-react-app custom-loading-screen-example
  1. 转到 <您的项目目录>/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 样式和

中的其他内容。

  1. 删除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;
  1. 启动它:
npm start

在 http://localhost:3000 查看应用程序。使用Chrome DevTools(如前所述)限制互联网速度,然后刷新页面以检查结果。

结论

您已经学习了如何为您的 React 应用程序实现自定义加载指示器。这项工作并不巨大,但极大地改善了用户体验。尝试修改代码、更改 CSS 样式、添加一些内容和删除一些内容,以使示例适合您的需要。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React 未准备好时显示自定义加载屏幕