极客教程在 React 中实现懒加载以及如何实现
懒加载 有助于优化 React 应用程序的性能。只有在访问或滚动时，数据才会被渲染，这可以是图片、脚本等。懒加载有助于快速加载网页，并向用户呈现所需的有限内容进行交互。懒加载对于具有高分辨率图像或因数据而改变应用程序加载时间的应用程序而言更加有用。
语法:
const MyComponent = React.lazy(() => import('./MyComponent'));
方法：
- 辨别你想要惰性加载的组件。这些组件通常是大型或复杂的，在页面加载时对所有用户来说并不是必需的。
- 从React包中导入
lazy()和 Suspense 组件：
import React, { lazy, Suspense } from 'react';
- 使用
lazy()函数来动态导入你想要延迟加载的组件：
const MyComponent = lazy(() => import('./MyComponent'));
请注意，传给 lazy() 函数的参数应该是一个返回 import() 函数结果的函数。
- 将延迟加载的组件包装在
Suspense组件中，在组件加载时显示一个回退的UI：
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
示例1：
import React from "react";
import { Suspense, lazy } from "react";
const Component1 = lazy(() => import(
'../src/LazyContent/myComponent1'))
const Component2 = lazy(() => import(
'../src/LazyContent/myComponent2'))
function App() {
return (
<>
<h1> Lazy Load</h1>
<Suspense fallback=
{<div>Component1 are loading please wait...</div>}>
<Component1 />
</Suspense>
<Suspense fallback=
{<div>Component2 are loading please wait...</div>}>
<Component2 />
</Suspense>
</>
);
}
export default App;
输出：
在React中，可以使用内置函数 React.lazy() 来实现延迟加载。这也被称为 代码拆分 ，其中 React.lazy 与webpack打包器一起将代码分成单独的块。当组件被请求时，相应的块会在需求时加载。React Suspense的作用是在异步组件或数据加载期间定义回退内容，如上所示。 React Suspense提供更好的反馈给用户，提高用户体验，因为用户在内容加载时不会遇到任何空白屏幕或空白空间。 React Suspense专门用于处理发起异步API请求的组件的加载。可以通过包装 组件并指定在组件或数据加载时显示的回退内容来使用React Suspense。
代码拆分： 这是优化性能和效率的一种有效技术，特别适用于具有大型代码库的Web应用。通过减少页面首次加载时需要加载的代码量，代码拆分可以改善用户体验，使应用更具响应性和快速性。
使用React应用中延迟加载的优势：
- 延迟加载只加载所需的资源，从而更有效地利用服务器资源。这对于高流量应用程序或服务器资源有限的情况非常重要。
- 使用延迟加载可以实现更快的初始加载时间，最大限度地减少了页面首次加载时需要下载和解析的代码量。这可以大大加快应用程序的首次加载时间。
总结： React Lazy Loading是一种强大的技术，可以显着提高基于React构建的Web应用的性能。延迟加载的一个关键好处是可以帮助提高“可交互时间”（Time to Interactive，TTI）指标，即页面变得可交互和响应所需的时间。通过延迟加载非关键组件，直到页面加载完成，延迟加载减少了TTI，并提供更具吸引力的用户体验。