react中懒加载实现原理
2023-07-03 本文已影响0人
云高风轻
1. 前言
- 除了自己写懒加载和使用第三方懒加载之外,react也支持懒加载的
- ,react咋支持懒加载的? 看完写呗
2. React.lazy
- react中
懒加载（Lazy Loading）是一种延迟加载组件或资源的技术，它可以提高应用程序的初始加载速度，只有在需要时才加载所需的组件或资源。React通过动态导入（Dynamic Import）和React的Suspense组件实现懒加载。
- React
16.6版本中，新增了React.lazy函数，它能让你像渲染常规组件一样处理动态引入的组件
3. 动态导入
- 在组件中使用动态导入来引入需要懒加载的组件。
- 动态导入是
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>
);
};
LazyComponent是一个需要懒加载的组件，通过React.lazy()函数进行懒加载，- 然后在应用程序的
根组件App中使用Suspense组件来包裹LazyComponent。- 在加载过程中，Suspense组件会显示
fallback属性指定的加载指示器或占位内容。
- 当应用程序渲染时，懒加载的组件将在需要时动态加载，直到加载完成后才显示在页面上。
这样可以减少初始加载时间，提高应用程序的性能和用户体验。
5. 懒加载只适用于默认导出的组件
1.如果需要导出多个组件，则需要使用命名导出，并通过解构赋值导入所需的组件。
// 懒加载多个组件
const { Component1, Component2 } = React.lazy(() => import('./LazyComponents'));
