react的错误边界

理解

错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面,防止错误页面扩散

特点:

只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式:

getDerivedStateFromError配合componentDidCatch

 // 生命周期函数,一旦后台组件报错,就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

getDerivedStateFromError

  1. 该函数为静态函数 static getDerivedStateFromError

  2. 运行时间点:子组件被渲染发生错误之后且也页面更新之前

  3. 只有子组件发生错误时,该函数才会被执行

  4. 该函数返回一个对象,React会将该对象的属性覆盖掉当前组件的state

  5. 参数:错误对象

  6. 通常该函数用于改变状态值

componentDidCatch

  1. 实例方法

  2. 运行时间点:子组件渲染发生错误且页面更新之后;由于该函数的运行时间点比较靠后,因此不会在该函数中改变状态

  3. 通常该函数用于记录错误信息

注意

  1. 组件的自身错误无法捕获

  2. 异步错误无法捕获,比如计时器

  3. 事件中的错误无法捕获,比如click事件中发生的错误

学习文档:https://zhuanlan.zhihu.com/p/103487621
学习视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=125

推荐阅读更多精彩内容