利用React-Suspence一分钟搞懂异步数据加载

2023-11-24 10:16:09

Suspence是React 16引入的一个重要特性，它允许组件在等待数据加载时显示一个加载指示器。在React 18中，Suspence变得更加强大，它现在可以用于同步和异步数据加载。

Suspence的官方推荐场景

Suspence的官方推荐场景如下：

在组件加载数据时显示一个加载指示器。
在组件渲染时等待数据加载完成。
在组件更新时等待数据加载完成。

借助Suspense的特性，将发起请求的异步写法改成同步

// 异步写法
useEffect(() => {
  const fetchData = async () => {
    const data = await fetch('https://example.com/api/data');
    setData(data);
  };
  fetchData();
}, []);

// 同步写法
const data = await fetch('https://example.com/api/data');
setData(data);

如何使用Suspence

在React中使用Suspence非常简单，只需要将需要等待数据加载的组件包裹在一个<Suspense>组件中即可。例如：

function MyComponent() {
  const data = await fetch('https://example.com/api/data');

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <div>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </div>
    </Suspense>
  );
}