React.lazy与Suspense使用教程

一分耕耘，一分收获！既然打开了这篇文章《React.lazy与Suspense用法详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

React.lazy 与 Suspense 可实现组件动态加载，减少初始包体积，提升首屏性能；通过 import() 动态引入组件，Suspense 包裹并设置 fallback 加载提示，结合 React Router 实现路由级代码拆分，配合 Error Boundary 处理加载失败，保障用户体验完整。

在现代前端开发中，提升应用加载性能的关键手段之一是代码拆分。React 提供了 React.lazy 与 Suspense 的组合方案，让开发者可以轻松实现组件级别的动态加载，从而减少初始包体积，加快首屏渲染速度。

React.lazy：动态导入组件

React.lazy 允许你像渲染普通组件一样动态加载一个使用动态 import() 加载的组件。它接收一个返回 Promise 的函数，该 Promise 需要 resolve 一个导出为 default 的 React 组件。

示例：

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

注意：目前 React.lazy 只支持默认导出（default exports）。

Suspense：处理加载状态

仅仅使用 React.lazy 是不够的，因为组件加载需要时间。Suspense 用于在组件异步加载时显示 fallback 内容，比如加载动画或占位符。

Suspense 包裹 lazy 组件，并通过 fallback 属性指定加载过程中的提示内容。

示例：

<Suspense fallback="<div>正在加载...</div>">
  <LazyComponent />
</Suspense>

Suspense 可以包裹多个 lazy 组件，且支持嵌套使用，统一管理加载状态。

实际应用场景

常见于路由级别的代码拆分。结合 React Router 使用，可按需加载不同页面。

例如：

const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

function App() {
  return (
    <Router>
      <Suspense fallback="<div>加载中...</div>">
        <Routes>
          <Route path="/" element=<Home /> />
          <Route path="/about" element=<About /> />
        </Routes>
      </Suspense>
    </Router>
  );
}

这样，只有访问对应路由时，才会加载相应组件代码。

错误处理与边界控制

Suspense 本身不处理加载失败的情况（如网络错误）。你需要配合 Error Boundary（错误边界）来捕获和处理异常。

创建一个错误边界组件：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>加载失败，请刷新重试。</div>;
    }
    return this.props.children;
  }
}

然后将它包裹在 Suspense 外层：

<ErrorBoundary>
  <Suspense fallback="<div>加载中...</div>">
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

基本上就这些。React.lazy 与 Suspense 的组合为代码拆分提供了简洁而强大的支持，合理使用能显著优化用户体验。不复杂但容易忽略的是加载状态和错误处理的完整性。

好了，本文到此结束，带大家了解了《React.lazy与Suspense使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！