React.lazy() 懒加载

news2024/11/14 1:29:50

概要

React.lazy() 是 React 16.6 引入的一个功能，用于实现代码分割（code splitting）。它允许你懒加载组件，即在需要时才加载组件，而不是在应用初始加载时就加载所有组件。这种方法可以显著提高应用的性能，尤其是在大型应用中。

基本用法

React.lazy() 仅接受一个函数，该函数必须返回一个动态引入的模块（使用 import()）

懒加载组件

假设你有一个名为 MyComponent.js 的组件，你可以这样使用 React.lazy()：

import React, { Suspense, lazy } from 'react';

// 使用 React.lazy() 懒加载组件
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <div>
      <h1>我的应用</h1>
      <Suspense fallback={<div>加载中...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
};

export default App;

使用Suspense

懒加载组件时，必须使用 Suspense 组件来包裹懒加载的组件。Suspense 组件允许你定义一个 fallback 属性，这个属性是组件在加载过程中显示的内容。例如，可以显示一个加载指示器。

例如：如果不使用Suspense包裹组件，有可能遇到这种报错信息：

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

这个错误提示是因为在处理用户输入（如点击、键盘输入等）时，某个懒加载的组件（使用 React.lazy()）被挂起了（suspended），导致 React 需要显示一个加载指示器。而这种情况通常是由于 React 在渲染期间遇到了懒加载组件，但该组件尚未加载完成。（通俗的说，是React使用了lazy之后，会存在一个加载中的空档期，React不知道在这个空档期中该显示什么内容，所以需要我们指定，所以就要使用到Suspense）

动态导入

使用动态导入（如 import() 语法）来实现代码分割，使得开发者可以在应用的不同部分按需加载模块，提高了代码的组织性和可维护性

原理解释

代码分割 — 优化 Web 应用性能的一种技术，主要目的是将大型应用程序的 JavaScript 代码拆分成更小的、按需加载的块。

为什么要代码分割？

现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。

1. 提高加载性能

初始加载时间：当用户首次访问一个大型应用时，加载所有的 JavaScript 文件可能会导致较长的加载时间。通过代码分割，应用只会加载必要的代码，从而减少初始加载的体积。
按需加载：代码分割允许应用在需要时才加载特定的代码块，比如当用户导航到某个特定的页面或触发特定的操作时。这种方式可以显著提高用户体验。