React Suspense没有按预期工作

React Suspense 是一个用于在 React 应用中处理异步加载组件的新特性。它允许你在组件等待某些数据或资源时“暂停”渲染，并显示一个备用 UI（如加载指示器）。以下是关于 React Suspense 的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

React Suspense 允许你将组件的加载状态与渲染逻辑分离。它通常与 React.lazy 结合使用，后者允许你动态导入组件。

优势

更好的用户体验：通过显示加载状态，用户知道内容正在加载，而不是看起来像是卡住或出错。
代码分割：有助于减少初始加载时间，因为只有需要的组件才会被加载。
简化异步逻辑：将异步操作从组件内部移到外部，使组件代码更简洁。

类型

数据获取：等待 API 响应。
代码分割：动态导入组件。

应用场景

懒加载组件：当页面包含多个组件且不是所有组件都需要立即加载时。
数据密集型应用：在获取大量数据时显示加载状态。

可能遇到的问题及解决方案

问题1：Suspense 没有按预期显示加载状态

原因：

可能是因为组件没有正确地抛出 Promise。
或者是 React.lazy 导入的组件没有正确处理异步逻辑。

解决方案：确保使用 React.lazy 正确导入组件，并且组件内部正确处理了异步逻辑。

import React, { Suspense } from 'react';

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

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

问题2：动态导入的组件加载失败

原因：

可能是由于网络问题或模块路径错误导致导入失败。

解决方案：使用 Error Boundary 来捕获和处理加载错误。

import React, { Suspense } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.error("Error loading component:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }

    return this.props.children; 
  }
}

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

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

示例代码

以下是一个完整的示例，展示了如何使用 React.lazy 和 Suspense 进行代码分割，并结合 ErrorBoundary 处理加载错误。

import React, { Suspense } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.error("Error loading component:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }

    return this.props.children; 
  }
}

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

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;

通过这种方式，你可以确保即使在遇到问题时，用户也能得到清晰的反馈，而不是一个空白或不响应的页面。