Suspense在React中的实际应用与常见问题解析

先看效果，再看代码

说到Suspense，这玩意儿真是个好东西。它能让你的应用在等待异步操作完成时，显示一个加载状态，而不是直接渲染空内容或错误信息。我第一次用的时候，就感觉这玩意儿太贴心了。

首先来看一个简单的例子，亲测有效：

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>Hello, Suspense!</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

这个例子中，LazyComponent 是一个懒加载组件，只有当它被渲染时才会加载。而 Suspense 组件则会在 LazyComponent 加载期间显示 Loading...。

这个场景最好用

在实际项目中，Suspense 最常用的场景就是数据获取。比如你有一个列表页，需要从后端获取数据，但又不想让用户看到空白页面或者加载指示器。这个时候，Suspense 就派上用场了。

举个例子，假设我们有一个用户列表，需要从 API 获取数据：

import React, { Suspense, lazy } from 'react';
import { useState, useEffect } from 'react';

const UserList = lazy(() => import('./UserList'));

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jztheme.com/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <Suspense fallback={<div>Loading users...</div>}>
        <UserList users={users} />
      </Suspense>
    </div>
  );
}

export default App;

在这个例子中，UserList 组件是懒加载的，并且在获取数据的过程中，会显示 Loading users... 的提示。这样用户就不会看到空白页面，体验会更好。

踩坑提醒：这三点一定注意

使用 Suspense 的时候，有几个坑点需要注意，这些都是我在实际开发中踩过的坑，希望你能避免。

• 1. 数据获取和 Suspense 的结合问题：
  默认情况下，React 的 Suspense 只支持代码分割（Code Splitting），不直接支持数据获取。如果你直接在组件里进行数据获取，可能会导致 Suspense 无法正确处理加载状态。解决方法是使用一些库，比如 react-query 或者 swr，它们都支持 Suspense。
• 2. Fallback 的性能问题：
  如果你的 Fallback 组件很复杂，可能会导致性能问题。建议尽量保持 Fallback 组件简单，比如只显示一个简单的加载动画。
• 3. 错误处理：
  Suspense 本身并不处理错误，如果懒加载的组件抛出错误，你需要自己捕获并处理。可以使用 ErrorBoundary 来捕获错误并显示友好的错误信息。

高级技巧：自定义 Suspense

有时候默认的 Suspense 行为可能不够灵活，你可以通过一些高级技巧来定制它的行为。比如说，你可以创建一个自定义的 Suspense 组件，来处理更复杂的加载逻辑。

举个例子，假设你有一个需要多次获取数据的场景，可以用一个自定义的 Suspense 组件来处理：

import React, { Suspense, lazy } from 'react';

const CustomSuspense = ({ children, fallback }) => (
  <Suspense fallback={fallback}>
    {children}
  </Suspense>
);

const LazyComponent1 = lazy(() => import('./LazyComponent1'));
const LazyComponent2 = lazy(() => import('./LazyComponent2'));

function App() {
  return (
    <div>
      <h1>Custom Suspense</h1>
      <CustomSuspense fallback={<div>Loading Component 1...</div>}>
        <LazyComponent1 />
      </CustomSuspense>
      <CustomSuspense fallback={<div>Loading Component 2...</div>}>
        <LazyComponent2 /</CustomSuspense>
    </div>
  );
}

export default App;

在这个例子中，我们定义了一个 CustomSuspense 组件，它可以接受不同的 fallback 属性，从而实现更灵活的加载逻辑。

结尾：拓展用法还有很多

以上是我对 Suspense 的一些实战经验和踩坑总结，希望对你有帮助。其实 Suspense 的应用场景还有很多，比如结合 React Query、SWR 等库来处理数据获取，或者在 SSR 中使用 Suspense 来优化首屏加载时间。后续我会继续分享这类博客，敬请期待。

如果有更好的实现方式或者更多的技巧，欢迎在评论区交流。