React 中的延迟加载Lazy loading

React 中的延迟加载功能可让您将代码拆分成更小的块,仅在实际需要时加载应用程序特定部分所需的代码。这可以缩短应用程序的初始加载时间。

React 提供了一项称为动态导入的功能以及 React 的 Suspense 组件来实现延迟加载。

以下是如何使用 React.lazy() 和 Suspense 在 React 应用程序中实现路由延迟加载的示例

lazy() 用于仅在需要时动态导入组件。

Suspense 是 React 提供的一个组件,可让您"等待"动态导入加载,同时显示后备 UI(在本例中为简单的"正在加载..."消息)。

为要延迟加载的组件创建一个单独的文件

javascript 复制代码
// Products.js
import React from 'react';

const Products = () => {
  return <div>This is a lazy-loaded component!</div>;
};

export default Products;

使用 React.lazy() 在路由文件中动态导入组件

javascript 复制代码
const Prodcuts = React.lazy(() => import("./components/products/Products"));
javascript 复制代码
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
//  import Prodcuts from "./components/products/Products";
import PageNotFound from "./components/PagenotFound/PageNotFound";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import Home from "./components/Home/Home";

const Prodcuts = React.lazy(() => import("./components/products/Products"));

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route path="/" element={<Home />} 
      <Route
        path="prodcuts"
        element={
          <React.Suspense fallback={<>...</>}>
            <Prodcuts />
          </React.Suspense>
        }
      />
      <Route path="*" element={<PageNotFound />} />
    </Route>
  )
);

const root = ReactDOM.createRoot(document.getElementById("root"));

在上面的代码中,产品组件使用 React.lazy() 延迟加载。Suspense 组件用于在加载延迟加载组件时指定回退 UI。

运行您的应用程序:

当您导航到 /products 路由时,Products组件仅在需要时加载。

注意:Suspense 的 fallback prop 是必需的。它定义了在加载组件时将显示的 UI。您可以根据应用程序的设计和要求自定义此 UI。

谢谢 !!!感兴趣可以关注一下,我们一起学习

相关推荐
慧一居士25 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
likeGhee39 分钟前
python缓存装饰器实现方案
开发语言·python·缓存
whoarethenext1 小时前
使用 C++/Faiss 加速海量 MFCC 特征的相似性搜索
开发语言·c++·faiss
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
项目題供诗1 小时前
黑马python(二十五)
开发语言·python
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc