面试题：React中错误边界的定义及基础使用

1. React中错误边界是什么

错误边界（Error Boundaries）是 React 组件，它可以捕获在其子组件树的任何位置抛出的 JavaScript 错误，并记录这些错误，同时展示一个降级 UI，而不是整个组件树崩溃。错误边界在渲染期间、生命周期方法以及构造函数中捕获错误。

2. 创建一个简单的错误边界组件

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;
  }
}

export default ErrorBoundary;

在上述代码中：

constructor 初始化 hasError 状态为 false。
componentDidCatch 方法捕获错误，记录错误信息并更新 hasError 状态。
render 方法根据 hasError 状态，决定是渲染子组件还是展示降级 UI。

3. 能捕获哪些类型的错误

渲染错误：在 render 方法中抛出的错误。例如：

class ChildComponent extends React.Component {
  render() {
    throw new Error('Render error');
    return <div>Child component</div>;
  }
}

生命周期方法错误：在 componentDidMount、componentDidUpdate 等生命周期方法中抛出的错误。例如：

class ChildComponent extends React.Component {
  componentDidMount() {
    throw new Error('Lifecycle error');
  }
  render() {
    return <div>Child component</div>;
  }
}

构造函数错误：在子组件的构造函数中抛出的错误。例如：

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    throw new Error('Constructor error');
  }
  render() {
    return <div>Child component</div>;
  }
}

需要注意的是，错误边界不能捕获以下类型的错误：

事件处理函数中的错误：例如在 onClick 等事件处理函数中抛出的错误。错误边界不会捕获这类错误，因为事件处理函数运行在 React 正常的渲染和生命周期之外。
异步代码中的错误：比如 setTimeout 或 Promise 回调函数中抛出的错误。因为这些错误不在 React 的渲染、生命周期或构造函数调用栈中。
错误边界自身抛出的错误：如果错误边界自身的 render、生命周期方法或构造函数中抛出错误，它将无法捕获这个错误。

星途面试题库

面试题：React中错误边界的定义及基础使用

知识考点

面试题答案

1. React中错误边界是什么

2. 创建一个简单的错误边界组件

3. 能捕获哪些类型的错误