面试题：React中componentDidCatch的基本使用

Question

请描述在React中`componentDidCatch`生命周期方法的作用，并且给出一个简单示例说明如何使用它来捕获子组件中的错误，包括在`componentDidCatch`方法内部通常会执行哪些操作。

Answer 1

componentDidCatch生命周期方法的作用

componentDidCatch 是 React 16 引入的新生命周期方法，用于捕获后代组件树中未被捕获的 JavaScript 错误，并将这些错误记录下来，防止整个应用崩溃。它为错误边界（Error Boundaries）提供了一种机制，使得应用在遇到错误时能够保持一定的可用性，而不是直接崩溃。

简单示例

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

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

  render() {
    if (this.state.hasError) {
      return <div>抱歉，发生了一个错误。</div>;
    }
    return this.props.children;
  }
}

class ChildComponent extends React.Component {
  render() {
    throw new Error('模拟一个错误');
    return <div>这是子组件</div>;
  }
}

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

componentDidCatch方法内部通常执行的操作

1. 错误记录：使用 console.log 或其他日志服务（如 Sentry 等）将错误信息和错误堆栈记录下来，方便开发人员定位问题。
2. 状态更新：通过更新组件状态，来改变 UI 的显示，向用户展示友好的错误提示信息，告知用户发生了错误，而不是直接展示空白或崩溃的页面。
3. 错误上报：将错误信息发送到后端服务器，以便后端团队分析和处理错误，例如通过 AJAX 请求将错误信息发送到指定的 API 端点。