React 的错误边界（Error Boundaries）

2025-01-06 暂无评论

React 的错误边界（Error Boundaries）是一种用于捕获和处理子组件树中 JavaScript 错误的机制。它们可以帮助你在应用中优雅地处理错误，防止整个应用崩溃，并提供更好的用户体验。

什么是错误边界？

错误边界是 React 组件，它可以捕获并处理其子组件树中发生的 JavaScript 错误，记录这些错误，并显示一个备用 UI，而不是让整个组件树崩溃。

如何创建错误边界？

要创建一个错误边界，你需要定义一个类组件，并实现 componentDidCatch 或 static getDerivedStateFromError 生命周期方法。

1. `componentDidCatch(error, info)`

error：抛出的错误对象。
info：包含有关错误发生位置的组件栈信息。

2. `static getDerivedStateFromError(error)`

该方法在错误发生时被调用，用于更新组件的状态，以便渲染备用 UI。

示例代码

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state，以便下次渲染时显示备用 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 你可以在这里记录错误信息
    console.error("Error caught by ErrorBoundary:", error, info);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的备用 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

// 使用错误边界
function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

function MyComponent() {
  // 模拟一个错误
  throw new Error("This is an error!");
  return <div>My Component</div>;
}

export default App;

注意事项

错误边界只能捕获子组件树中的错误：它们无法捕获自身抛出的错误，也无法捕获事件处理程序、异步代码（如 setTimeout 或 Promise）中的错误。
错误边界是 React 16 引入的特性：在 React 15 及更早版本中，错误会导致整个应用崩溃。
错误边界不能捕获服务端渲染中的错误：它们仅在客户端渲染时有效。

最佳实践

在关键组件周围使用错误边界：例如，在路由组件或复杂组件周围使用错误边界，以防止局部错误影响整个应用。
提供有用的错误信息：在备用 UI 中提供有用的错误信息，帮助用户理解发生了什么。
记录错误：使用 componentDidCatch 记录错误信息，以便后续分析和修复。

通过使用错误边界，你可以显著提高 React 应用的健壮性和用户体验。