reactjs v18 的 Suspense 如何使用 在加载数据时看不到fallback的内容

在 ReactJS v18 中，可以使用 Suspense 组件来处理在加载数据时不显示 fallback 内容的情况。Suspense 组件可以用于懒加载组件、异步获取数据等场景。

首先，在使用 Suspense 组件之前，需要确保你的 React 版本已经升级到 v18。

接下来，你可以按照以下步骤使用 Suspense 组件：

1. 导入 Suspense 组件和其他相关组件和函数。

import { Suspense } from 'react';
import { fetchData } from './api';

2. 创建一个异步加载数据的函数，并使用 Suspense 组件包裹需要异步加载数据的组件。

function MyComponent() {
  return (
    <Suspense fallback={null}>
      <AsyncDataComponent />
    </Suspense>
  );
}

3. 在需要加载数据的组件中，使用 React.lazy 函数来懒加载数据。

const AsyncDataComponent = React.lazy(() => fetchData());

4. 在 fetchData 函数中，可以使用 Promise 来模拟异步加载数据的过程。

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 'Loaded data' });
    }, 2000);
  });
}

在上述代码中，fetchData 函数返回一个 Promise，并在 2 秒后解析为包含数据的对象。

当你运行这段代码时，MyComponent 组件会立即渲染，但是 AsyncDataComponent 组件中的数据会在 2 秒后才会加载完成。在加载数据期间，Suspense 组件会显示 fallback 属性指定的内容，这里我们将其设置为 null，以便在加载数据时不显示任何内容。

当数据加载完成后，AsyncDataComponent 组件会被渲染，并显示加载的数据。

需要注意的是，Suspense 组件只能包裹动态加载的组件，而不能包裹静态组件。如果你需要在加载数据时显示 fallback 内容，可以将 Suspense 组件放置在需要加载数据的组件的父组件中