面试题：React中错误边界的基本概念及动态处理思路

Question

请简述React错误边界是什么，在动态处理错误边界的场景下，你会如何使用`componentDidCatch`生命周期方法捕获子组件错误并展示友好提示信息？

Answer 1

React错误边界是什么

1. 定义：React错误边界是一种React组件，这种组件可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且能渲染出备用UI，而不是渲染那些崩溃了的子组件树。
2. 作用：错误边界可以让应用在部分组件发生错误时，不至于整个应用崩溃，提升用户体验，同时方便开发者定位和处理错误。
3. 适用范围：错误边界仅能捕获其子组件树中的错误，无法捕获自身的错误（如constructor中的错误）以及异步代码（如setTimeout或Promise回调）中的错误。

在动态处理错误边界场景下使用componentDidCatch生命周期方法捕获子组件错误并展示友好提示信息

1. 创建错误边界组件：

   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         hasError: false,
         errorMessage: ''
       };
     }
     componentDidCatch(error, errorInfo) {
       // 记录错误信息，方便调试
       console.log('捕获到错误:', error, errorInfo);
       this.setState({
         hasError: true,
         errorMessage: '很抱歉，组件出现了错误，请稍后重试。'
       });
     }
     render() {
       if (this.state.hasError) {
         // 展示友好提示信息
         return <div>{this.state.errorMessage}</div>;
       }
       return this.props.children;
     }
   }
   

2. 使用错误边界组件：

   function App() {
     return (
       <ErrorBoundary>
         {/* 假设这里的子组件可能会抛出错误 */}
         <ChildComponent />
       </ErrorBoundary>
     );
   }
   

在上述代码中，ErrorBoundary组件充当错误边界，componentDidCatch方法捕获子组件抛出的错误，并设置状态hasError为true，同时设置友好的错误提示信息errorMessage。在render方法中，根据hasError状态决定是渲染友好提示信息还是正常渲染子组件。