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

Posted

技术标签:

【中文标题】在 React 应用程序中添加预加载器【英文标题】:Adding Preloader in React Application 【发布时间】:2021-03-19 15:32:25 【问题描述】:

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

我需要帮助。

这是我下面给出的应用代码:-

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')
);

【问题讨论】:

【参考方案1】:

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

特别是设置预加载用户界面,您可以查看此帖子: React - Display loading screen while DOM is rendering?

【讨论】:

【参考方案2】:

我们通常会进行 API 调用,在数据准备好之前,我们会显示一个加载器。 SVG 加载器或任何其他加载器。

您基本上需要设置三种状态来维护加载、错误和您的数据: 使用以下设置这将有助于您的项目。也可以访问我的github项目,从API and Loader获取Loader Code

function App() 
  const [tours, setTours] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  /*--- I am using fetch API here
  useEffect(() => 
    setLoading(true);
    fetch(url)
      .then((response) => 
        if (response.status >= 200 && response.status < 300) 
          return response.json();
         else 
          throw new Error("Could not fetch data");
        
      )
      .then((tours) => 
        setLoading(false);
        setTours(tours);
      )
      .catch((err) => console.log(err));
  , []);
  ---*/

  const fetchTours = async () => 
    try 
      const response = await fetch(url);
      const tours = await response.json();
      setLoading(false);
      setTours(tours);
     catch (error) 
      setLoading(false);
      setError(true);
    
  ;
  useState(() => 
    setLoading(true);
    fetchTours();
  , []);
  // Functionality 1: Not Interested Button click
  const handleBtnClick = (id) => 
    const updatedTours = tours.filter((tour) => tour.id !== id);
    setTours(updatedTours);
  ;

  // Functionality 2: Refresh Button click

  const handleRefresh = () => 
    setLoading(true);
    fetchTours();
  ;

  // Let us do conditional rendering
  if (loading) 
    return (
      <div style= textAlign: "center", margin: "2rem 0" >
        <Loader />
      </div>
    );
  

  if (error) 
    return <p>Error ...</p>;
  

  return (
    <section>
      <p className="our-tours">
        tours.length > 0 ? (
          "Our Tours"
        ) : (
          <div>
            <p>No Tours Left</p>
            <button className="btn" onClick=handleRefresh>
              Refresh
            </button>
          </div>
        )" "
      </p>
      <main className="App">
        tours.length > 0 && (
          <Tours tours=tours handleClick=handleBtnClick />
        )
      </main>
    </section>
  );


export default App;

共有三种情况:

    最初我们的加载是真实的,我们展示了我们的加载器。

    当数据成功到达后,我们开始显示数据并隐藏我们的加载器。

    当我们的 API 调用出现错误时,我们会显示错误消息。

上述设置适用于所有情况:)

【讨论】:

@Zidan Mehadi:希望答案有帮助。如果这样做,请单击勾选图标接受答案。谢谢:)

以上是关于在 React 应用程序中添加预加载器的主要内容,如果未能解决你的问题,请参考以下文章

将文本添加到固定预加载器

React Native - ios - 从预打包文件加载失败

如何在 AS3 中创建预加载器

Adobe AIR - 带有图像的自定义预加载器

如何使用 vue-resource 在表单提交上添加预加载器和成功消息

html 将预加载器添加到Divi网站