React 中的延迟加载Lazy loading

喂！大掌柜2024-06-27 18:11

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。

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