文章目录

• 1、适用点
• 2、汇总

1、适用点

懒加载往往配合路由一起使用，此处修改的项目是 二、【React-Router5】路由的基本使用 中的项目

1. 首先从react中引入lazy

   1. import { lazy } from 'react'

2. 修改引入路由组件的写法

   1. // import About from './pages/About'
      // import Home from './pages/Home'
      const About = lazy(() => import('./pages/About'))
      const Home = lazy(() => import('./pages/Home'))
      

   2. 此时你会发现报错了

      1. 

      2. 翻译过来就是

         1. 未捕获错误：响应同步输入时组件挂起。这将导致UI被加载指示符替换。要修复此问题，应使用startTransition包装挂起的更新

      3. 啥意思呢？意思就是需要使用 React 18 新特性：startTransition 进行处理，这里暂时不讨论（注此项小白未验证，后续若有新版笔记可能会做验证，静待后续更新）

      4. 使这里使用 =Suspense== 进行处理

   3. 使用 Suspense 解决问题

      1. 引入 Suspense：import { Suspense } from 'react'

      2. 给注册路由的地方套上，并配置 fallback 展示未加载完成时显示的内容

      3. 加载中...}>{/* Route 注册路由 */} {/* 兜底 */}
         
         

      4. fallback 也可以配置成一个加载组件，丰富一下加载页面

2、汇总

import { lazy, Suspense } from 'react'
impot Loding from './components/Loading'//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))//2.通过指定在加载得到路由打包文件前显示一个自定义loading界面
}>Xxxx}/>