React 中什么是错误边界 (Error Boundaries)？

推荐答案

在 React 中，错误边界（Error Boundaries）是一种用于捕获并处理子组件树中 JavaScript 错误的 React 组件。它能够捕获渲染期间、生命周期方法中以及整个组件树的构造函数中的错误。通过使用错误边界，开发者可以优雅地处理这些错误，避免整个应用崩溃，并显示一个备用的 UI。

错误边界通过 componentDidCatch 生命周期方法来捕获错误，并可以在这个方法中记录错误信息或显示一个错误提示界面。

本题详细解读

什么是错误边界？

错误边界是 React 16 引入的一个新特性，用于捕获和处理组件树中的 JavaScript 错误。它类似于 JavaScript 中的 try-catch 语句，但专门用于 React 组件。错误边界只能捕获其子组件树中的错误，而不能捕获自身的错误。

如何使用错误边界？

要创建一个错误边界，你需要定义一个类组件，并在其中实现 componentDidCatch 生命周期方法。这个方法会在子组件抛出错误时被调用，并接收两个参数：error（错误对象）和 info（包含有关组件栈的信息）。

// www.javascriptcn.com code example
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // 你可以在这里记录错误信息或发送错误报告
    console.error("Error caught by ErrorBoundary:", error, info);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 你可以在这里渲染一个备用 UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

错误边界的限制

1. 不能捕获所有错误：错误边界只能捕获子组件树中的错误，不能捕获事件处理程序、异步代码（如 setTimeout 或 Promise）、服务端渲染中的错误以及错误边界组件自身的错误。

2. 只能捕获渲染和生命周期方法中的错误：错误边界主要用于捕获渲染期间和生命周期方法中的错误，而不能捕获事件处理程序中的错误。

示例

// www.javascriptcn.com code example
function MyComponent() {
  throw new Error("This is an error!");
  return <div>MyComponent</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

在这个例子中，MyComponent 抛出了一个错误，ErrorBoundary 捕获了这个错误并显示了一个备用 UI，而不是让整个应用崩溃。

总结

错误边界是 React 中处理组件树中错误的一种强大工具，它可以帮助开发者更好地控制错误处理流程，提升应用的健壮性和用户体验。