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。

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

相关推荐
爱吃烤鸡翅的酸菜鱼19 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我27 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子32 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹36 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器42 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻1 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己1 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json