面试题：React错误边界在类组件中的实现方式

Question

请阐述如何在React类组件中创建一个错误边界，需要说明具体的生命周期方法以及它们的作用，并给出一个简单的代码示例。

Answer 1

1. 错误边界定义

错误边界（Error Boundaries）是React 16中引入的新特性，它用于捕获子组件树中的JavaScript错误，并记录这些错误，同时展示降级UI，而不是整个组件树崩溃。

2. 生命周期方法

• componentDidCatch(error, errorInfo)：
  • 作用：在后代组件抛出错误后会触发此方法。error 是抛出的错误，errorInfo 包含有关错误发生位置的信息，例如组件堆栈跟踪。此方法可用于记录错误到日志服务，并渲染备用UI。
  • 注意：此方法仅捕获在渲染期间、生命周期方法和构造函数中抛出的错误。

3. 代码示例

import React, { Component } from 'react';

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

  componentDidCatch(error, errorInfo) {
    // 记录错误到日志服务
    console.log('Error caught:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 备用UI
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

class ChildComponent extends Component {
  render() {
    // 模拟错误
    throw new Error('Simulated error');
    return <div>Child Component</div>;
  }
}

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <ChildComponent />
      </ErrorBoundary>
    );
  }
}

export default App;

在上述代码中，ErrorBoundary 组件作为错误边界，包裹了 ChildComponent。当 ChildComponent 抛出错误时，ErrorBoundary 的 componentDidCatch 方法会捕获错误，更新状态并渲染备用UI。