时间戳

首页 > 解决方案 > 在 React 应用程序中添加预加载器

javascript - 在 React 应用程序中添加预加载器

问题描述

我想在我的反应应用程序中添加一个预加载器。原因是，我的应用程序需要很多时间来加载。所以，我希望当我的所有应用程序内容完全准备好加载时，它会自动呈现。只要我的应用程序需要时间准备好加载，就会呈现预加载器。有可能吗？

我需要帮助。

这是我下面给出的应用程序代码：-

import React from 'react';
import Navbar from './Navbar'
import Home from './Home';
import About from './About';
import Services from './Services';
import Skills from './Skills';
import Contact from './Contact';
import Footer from './Footer';
import Reset from './Reset';

function App() {

  return (
    <>
      <Reset />
      <Navbar />
      <Home />
      <About />
      <Services />
      <Skills />
      <Contact />
      <Footer />
    </>
  );

}

export default App;

这是我的 Index.js 代码如下：-

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Preloader from './Preloader'

ReactDOM.render(
  <App/>
  ,document.getElementById('root')
);

标签： javascriptreactjs

解决方案

根据您想要实现的目标，您有很多选择。这就是使用像 React 这样的框架的目标。我的建议是，将数据（API 调用等）的加载与 UI 的加载分开。使用异步方法加载可以执行的数据。我看到您正在使用功能组件，因此请查看反应挂钩并使用状态生成数据。您有一种将默认值设置为状态的方法，因此所有内容都可以独立于数据生成进行渲染。稍后，当状态设置为您的数据时，站点将使用新数据自动呈现。

具体到设置预加载用户界面，您可以查看这篇文章： React - Display loading screen while DOM is rendering?

推荐阅读