面试题：React中useErrorBoundary与传统错误边界类组件的对比与优势

1. 代码结构优势

useErrorBoundary：基于 React Hook，使代码更简洁，逻辑更集中。例如，在函数组件中使用useErrorBoundary，只需在函数内部调用即可：

import { useErrorBoundary } from'react-error-boundary';

function MyComponent() {
  const { ErrorBoundary } = useErrorBoundary({
    onError: (error, errorInfo) => {
      console.log('Error occurred:', error, errorInfo);
    }
  });
  return (
    <ErrorBoundary>
      {/* 可能出错的子组件 */}
    </ErrorBoundary>
  );
}

它不需要创建一个单独的类组件，减少了样板代码，提高了代码的可读性和维护性。
传统错误边界类组件：需要创建一个继承自React.Component的类，并重写componentDidCatch等生命周期方法，代码结构相对复杂：

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

  componentDidCatch(error, errorInfo) {
    console.log('Error occurred:', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 错误提示UI
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

这种方式需要更多的代码来管理状态和错误处理逻辑，对于简单的错误边界需求，显得过于繁琐。

2. 错误处理灵活性优势

useErrorBoundary：
- 可以在函数组件中按需使用，方便在不同的逻辑模块中灵活设置错误边界。比如在一个大型应用的某个特定功能模块中使用useErrorBoundary，而不影响其他模块。
- 支持动态配置错误处理逻辑。例如，可以根据不同的运行环境或用户角色，动态调整onError回调函数中的处理逻辑。
传统错误边界类组件：
- 一旦定义好类组件，其错误处理逻辑相对固定，更改处理逻辑需要修改类的实现，灵活性较差。
- 复用性不如useErrorBoundary，如果在多个组件中需要不同的错误处理逻辑，可能需要创建多个类似的错误边界类组件。

3. 仍需使用传统错误边界类组件的情况

旧代码库：在一些已经使用传统类组件构建的大型项目中，引入useErrorBoundary可能需要对代码结构进行较大的调整。此时，继续使用传统错误边界类组件可以减少代码改动带来的风险，更易于维护和理解现有代码。
复杂状态管理和生命周期依赖：如果错误处理逻辑依赖于复杂的组件状态管理（如多个状态之间的复杂交互），或者依赖于其他类组件的生命周期方法（如componentDidMount等），传统错误边界类组件可能更合适。因为类组件提供了完整的生命周期方法，可以更好地处理这种复杂情况，而useErrorBoundary在函数组件中，处理这类复杂场景相对困难。

星途面试题库

面试题：React中useErrorBoundary与传统错误边界类组件的对比与优势

知识考点

面试题答案

1. 代码结构优势

2. 错误处理灵活性优势

3. 仍需使用传统错误边界类组件的情况