React 进阶面试题, 什么是 React 的 Error Boundaries?它有什么作用?

Step 1

Q:: 什么是 React 的 Error Boundaries？

A:: React 的 Error Boundaries 是一种可以捕获子组件渲染期间发生的 JavaScript 错误的组件，它们不会捕获事件处理、异步代码、服务端渲染或自身抛出的错误。Error Boundaries 会在其子组件的生命周期钩子（如 componentDidCatch）中捕获错误，并渲染一个回退 UI，而不是完全崩溃。

Step 2

Q:: Error Boundaries 有哪些常见的使用场景？

A:: Error Boundaries 主要用于以下场景：1. 捕获第三方库引起的错误；2. 防止个别组件的错误影响整个应用程序的运行；3. 显示用户友好的错误信息，提升用户体验。

Step 3

Q:: 如何创建一个 Error Boundary 组件？

A:: 可以通过定义一个类组件，并实现 componentDidCatch(error, info) 生命周期方法来创建 Error Boundary 组件。还可以使用 static getDerivedStateFromError 来更新组件的状态以显示回退 UI。例如：

 
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    // 可以在此处记录错误信息
  }
 
  render() {
    if (this.state.hasError) {
      return <h1>出现错误</h1>;
    }
    return this.props.children; 
  }
}
 

Step 4

Q:: Error Boundaries 与 try-catch 有何区别？

A:: Error Boundaries 只能用于捕获组件树中子组件的渲染、生命周期方法和构造函数中的错误，无法捕获事件处理、异步代码或自身的错误。而 try-catch 是一种通用的错误处理机制，可以捕获任何 JavaScript 代码块中的错误。