React初始记录（八）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

错误边界

1、概述

过去，组件内的JavaScript错误会导致React的内部状态被破坏，并且在下次渲染时产生可能无法追踪的错误。这些错误基本上是由较早的其他代码（非React组件代码）错误引起的，但React并没有提供一种能在组件中优雅处理这些错误的方式，也无法从错误中恢复。因此在React16引入了一个新的概念-错误边界

2、什么是错误边界

错误边界是一种React组件，这种组件可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且，它会渲染出备用UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

tips: 错误边界无法捕获事件处理、异步代码、服务端渲染、自身（不包括它的子组件）抛出来的错误。

如果一个class组件中定义了static getDerivedStateFromError()或componentDidCatch()这两个生命周期方法中任意一个（或两个）时，那么就会变成一个错误边界。当抛出错误后，使用static getDerivedStateFromError()渲染备用UI，使用componentDidCatch()打印错误信息。

class Error extends React.Component {
    constructor(props){
        super(props);
        this.state = { hasError: false } 
    }
    static getDerivedStateFromError(error){
    // 更新state使下一次渲染能够显示降级后的UI
        return { hasError: true }
    }
    componentDidCatch(error,errorInfo){
        //也可将错误日志上传到服务器
        logError(error,errorInfo)
    }
    render(){
        if(this.state.hasError){
           // 自定义降级后的UI渲染
            return <div>错误</div>
        }
        
        return this.props.children;
    }

}

可将其作为常规组件去使用：

<Error>
  <A />
</Error>

错误边界的工作方式类似于JavaScript的catch{},不同的地方在于错误边界只针对React组件。只有class才能成为错误边界组件。大多数情况下，只需声明一次错误边界组件，并在整个应用中使用。

tips:错误边界仅可以捕获其子组件的错误，无法捕获自身错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也和JavaScript中的catch{}工作机制类似。