告别 react-loadable，拥抱 React.Suspense：开启组件按需加载新篇章

在React v16.6之前，组件按需加载通常使用react-loadable这个包。但是React v16.6提出了React.Suspense的新特性，可以完美的替代react-loadable，并且无需第三方依赖。

新特性是什么？

React.Suspense是一个内置的组件，允许您在组件加载时显示备用UI。这对于避免在组件加载时出现空白屏幕非常有用。

React.Suspense 可以与任何使用异步加载数据的组件一起使用。例如，您可以使用它来加载代码拆分的组件或从服务器获取数据的组件。

在构建应用程序时，代码分割是一个非常有用的技术，允许你将应用程序分成更小的部分，然后只加载当前正在使用的部分。这可以极大地提高应用程序的性能，特别是对于大型应用程序。

React.Suspense 的优点

• 提高应用程序性能：
  通过仅加载当前正在使用的组件，React.Suspense 可以帮助提高应用程序的性能。
• 改善用户体验：
  React.Suspense 可以避免在组件加载时出现空白屏幕，从而改善用户体验。
• 易于使用：
  React.Suspense 易于使用，并且不需要您进行任何特殊的配置。

React.Suspense 如何工作？

React.Suspense 组件有两种不同的用法：

1. 作为父组件：
   当作为父组件时，React.Suspense 将等待其所有子组件加载完成，然后才渲染其自身。
2. 作为子组件：
   当作为子组件时，React.Suspense 将等待其自身加载完成，然后才渲染其子组件。

演示代码：

import React, { Suspense } from "react";

const MyComponent = React.lazy(() => import("./MyComponent"));

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

export default App;

在这个例子中，MyComponent 是一个代码拆分组件，它将被异步加载。Suspense 组件将等待 MyComponent 加载完成，然后才渲染它。

如何使用 React.Suspense？

要使用 React.Suspense，您需要将其导入您的应用程序。然后，您可以将其用作父组件或子组件。

作为父组件使用 React.Suspense：

import React, { Suspense } from "react";

const MyComponent1 = React.lazy(() => import("./MyComponent1"));
const MyComponent2 = React.lazy(() => import("./MyComponent2"));

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

export default App;

在这个例子中，MyComponent1 和 MyComponent2 都是代码拆分组件，它们将被异步加载。Suspense 组件将等待 MyComponent1 和 MyComponent2 加载完成，然后才渲染它们。

作为子组件使用 React.Suspense：

import React, { Suspense } from "react";

const MyComponent = React.lazy(() => import("./MyComponent"));

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

export default App;

在这个例子中，MyComponent 是一个代码拆分组件，它将被异步加载。Suspense 组件将等待 MyComponent 加载完成，然后才渲染它。

结论

React.Suspense 是一个非常有用的新特性，它可以帮助您提高应用程序的性能、改善用户体验，并且易于使用。如果您正在使用 React，那么我强烈建议您使用 React.Suspense 来实现组件按需加载。

相关搜索