面试官：React 怎么错误处理？

在 React 中进行错误处理通常涉及两个方面：组件生命周期方法和错误边界（Error Boundaries）。

1. 组件生命周期方法：

在组件的生命周期方法中，你可以使用 componentDidCatch() 方法来捕获组件内部发生的 JavaScript 错误，并进行处理。这个方法在组件渲染期间、生命周期方法，或子组件的构造函数中发生的错误都会被捕获。

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

  componentDidCatch(error, errorInfo) {
    // 将错误信息记录到日志或发送给服务器
    console.error('Error caught:', error, errorInfo);
    // 设置状态以显示错误UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 渲染自定义的错误UI
      return <h1>Something went wrong.</h1>;
    }
    // 正常渲染子组件
    return this.props.children;
  }
}

然后，在你的应用程序中，你可以使用 ErrorBoundary 组件来包裹可能出错的部分：

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

2. 错误边界（Error Boundaries）：

错误边界是一种 React 组件，可以捕获并处理其子组件树中发生的错误，并渲染备用 UI。你可以通过定义一个错误边界组件来实现错误处理。

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

  static getDerivedStateFromError(error) {
    // 更新 state 以显示错误UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 将错误信息记录到日志或发送给服务器
    console.error('Error caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 渲染备用UI
      return <h1>Something went wrong.</h1>;
    }
    // 正常渲染子组件
    return this.props.children;
  }
}

然后，在你的应用程序中，你可以将错误边界组件包裹在可能出错的部分：

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

通过使用组件生命周期方法和错误边界，你可以在 React 应用程序中进行错误处理，并提供友好的用户体验，同时保持应用程序的稳定性。