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。

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

相关推荐
某公司摸鱼前端21 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~23 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程28 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏29 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
黄雪超2 小时前
JVM——函数式语法糖:如何使用Function、Stream来编写函数式程序?
java·开发语言·jvm
ThetaarSofVenice2 小时前
对象的finalization机制Test
java·开发语言·jvm
思则变3 小时前
[Pytest] [Part 2]增加 log功能
开发语言·python·pytest