一起学习React18新特性-Suspense

不久前 React18 发布了，我们一起来学习 React18 新特性-Suspense

什么是 React Suspense

React Suspense 可以在 React 中实现延迟加载和展示加载状态。开发人员可以使用这个组件将可能需要长时间加载或异步数据加载的组件包裹起来。

1
2
3

<Suspense fallback={<div>Loading UI...</div>}>
  <LongTimeComponent />
</Suspense>

当你使用 Suspense 的组件被渲染时，它抛出一个类似 Promise 的对象，称为“suspense boundary”。告诉 React 该组件处于加载状态，此时可以展示你自定义的 Loading UI，直到该组件返回结果。

当组件返回结果可以展示时，就会隐藏 Loading UI，展示你包裹的组件。

Suspense 还可以结合 React.lazy()函数实现组件的延迟加载，通过只加载当前屏幕需要的组件来提高应用程序的性能。

为什么使用 React Suspense

通过延迟加载来提高应用程序的性能。这可以减少浏览器下载和解析代码的数量，从而缩短应用程序的初始加载时间。
以声明方式为包裹需要长时间加载或异步数据加载的组件。这可以更轻松地构建复杂的加载状态。
通过在整个应用程序中显示一致的加载状态来避免“加载内容闪烁”和其他与加载相关的问题。
简化应用程序中异步数据和加载状态的管理。使用 Suspense，可以避免使用复杂的模式。

总的来说，React Suspense 可以更轻松地处理异步数据的加载和复杂加载状态的呈现，从而帮助你构建性能更高且用户体验更好的应用。

什么情况下使用 React Suspense

你的组件需要很长时间才能呈现，并且你希望在呈现组件时显示加载状态。
你有依赖于异步数据的组件，并且你希望在获取数据时显示加载状态。
你希望通过延迟加载不是立即需要的组件来提高应用程序的性能。

具体场景：例如可以使用在非首页路由上，让首屏加载更快。

如何使用 React Suspense

参见下方代码

使用 React Suspense 包装组件。
在 fallback 内定义 Loading UI。

程序会先展示 Loading UI，等 LazyComponent 加载完成后，再显示。

import React, { Suspense, lazy } from "react";
const LazyComponent = lazy(() => import("./LazyComponent"));
const MyApp = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

在异步请求时使用

定义一个 MyComponent 组件。
MyComponent 组件中需要异步请求数据。
当 data 为 null 时，返回 Promise，通知 react 显示 Loading UI

import React, { Suspense, useState, useEffect } from "react";
const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await someAsyncOperation();
      setData(result);
    };
    fetchData();
  }, []);

  if (data === null) {
    throw new Promise(() => {});
  }

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