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。

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

相关推荐
Code Warrior1 小时前
【每日算法】专题五_位运算
开发语言·c++
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
沐知全栈开发3 小时前
HTML DOM 访问
开发语言
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person5 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6665 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode