React中组件懒加载的使用

最新推荐文章于 2024-07-26 11:40:36 发布

It's Q

最新推荐文章于 2024-07-26 11:40:36 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏： React学习记录文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_41522951/article/details/131745464

React学习记录专栏收录该内容

5 篇文章

订阅专栏

懒加载能减少应用启动时间和页面加载时间，提高用户体验。在React中，通过`lazy`函数和`Suspense`组件实现按需加载，只有当用户实际需要时才加载组件，同时配合加载提示以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要使用懒加载

减少了应用启动时间，页面的加载速度变快，提升用户体验

懒加载

页面首次打开，不加载在路由中设置为懒加载的组件，只有用户在实际使用中，使用到了这个组件，才会开始加载

实现代码

  import React, { lazy } from "react"
  import { Navigate } from "react-router-dom"
  import Home from "@/views/Home"
//   import About from "@/views/About"

  const About = lazy(()=>import("../views/About"))
  //懒加载组件的写法，外边需要套一层Loading的提示加载组件

//提取出懒加载写法的共有之处，传递参数使用，避免代码冗余
  const withLoadingComponent = (comp:JSX.Element) =>(
    <React.Suspense fallback={<div>Loading······</div>}>
        {comp}
    </React.Suspense>
  )


  const routes = [

    {
        path:'/',
        element:<Navigate to="/home" />
    },
    
    {
        path:'/home',
        element:<Home/>
    },
    {
        path:'/about',
        element:withLoadingComponent(<About/>)
    }
  ]
 
  export default routes