1. 前言

1. 除了自己写懒加载和使用第三方懒加载之外,react也支持懒加载的
2. ,react咋支持懒加载的? 看完写呗

---

2. React.lazy

1. react中懒加载（Lazy Loading）是一种延迟加载组件或资源的技术，它可以提高应用程序的初始加载速度，只有在需要时才加载所需的组件或资源。React通过动态导入（Dynamic Import）和React的Suspense组件实现懒加载。

2. React 16.6 版本中，新增了 React.lazy 函数，它能让你像渲染常规组件一样处理动态引入的组件

---

3. 动态导入

1. 在组件中使用动态导入来引入需要懒加载的组件。
2. 动态导入是ES6的一项功能，可以将模块作为函数调用并返回一个Promise对象。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

• 使用React.lazy()函数：

1.React.lazy()函数是React提供的用于实现懒加载的函数，它接受一个函数作为参数，该函数返回一个动态导入的Promise对象。
2.React.lazy()返回一个新的组件，该组件在需要时自动加载动态导入的组件

---

4. 使用Suspense组件

1.在应用程序的根组件或懒加载组件的父组件中，使用Suspense组件来包裹懒加载的组件，并设置fallback属性，指定在加载过程中显示的加载指示器或占位内容。

import React, { Suspense } from 'react';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

1. LazyComponent是一个需要懒加载的组件，通过React.lazy()函数进行懒加载，
2. 然后在应用程序的根组件App中使用Suspense组件来包裹LazyComponent。
3. 在加载过程中，Suspense组件会显示fallback属性指定的加载指示器或占位内容。

• 当应用程序渲染时，懒加载的组件将在需要时动态加载，直到加载完成后才显示在页面上。
  这样可以减少初始加载时间，提高应用程序的性能和用户体验。

---

5. 懒加载只适用于默认导出的组件

1.如果需要导出多个组件，则需要使用命名导出，并通过解构赋值导入所需的组件。

// 懒加载多个组件
const { Component1, Component2 } = React.lazy(() => import('./LazyComponents'));

---

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉