全面解析 React Lazy.js：探寻 React 应用按需加载的秘密

2023-10-08 15:11:36

React Lazy.js 是 React 16.6 中引入的一个重要特性，它允许我们按需加载 React 组件，从而提高应用程序的性能。

React Lazy.js 的工作原理是利用代码分割（code splitting）技术，将应用程序的代码分成多个小块，并只在需要时加载这些代码块。这可以通过使用 Webpack 或 Rollup 等工具来实现。

在 React 中，我们可以使用 React.lazy() API 来定义一个延迟加载的组件。这个 API 接收一个函数作为参数，该函数返回一个 Promise 对象。这个 Promise 对象在组件第一次渲染时被解析，并返回组件的实际实现。

import React, { Suspense } from 'react';

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

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

在上面的代码中，MyLazyComponent 是一个延迟加载的组件。当该组件第一次渲染时，React 会显示一个回退组件（fallback component），即 <div>Loading...</div>。然后，React 会加载 MyLazyComponent 的实际实现，并将其渲染到 DOM 中。

我们可以使用 Suspense 组件来包装延迟加载的组件，以指定当这些组件还没有加载完成时应该显示什么内容。

import React, { Suspense } from 'react';

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyLazyComponent />
      <AnotherLazyComponent />
    </Suspense>
  );
};

在上面的代码中，当 MyLazyComponent 和 AnotherLazyComponent 还没有加载完成时，React 会显示 <div>Loading...</div>。

为了进一步提高按需加载的性能，我们可以使用 Preload 组件。这个组件允许我们在组件实际需要之前就开始加载它。

import React from 'react';

const App = () => {
  return (
    <>
      <Preload as={React.lazy(() => import('./MyLazyComponent'))} />
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </>
  );
};