错误边界
错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面。
注意:只在生产环境(项目上线)起效
特点:
- 只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
- 简单理解就是只能捕获后代组件生命周期钩子里面代码的错误
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
state = {
//用于标识子组件是否产生错误
hasError: '',
}
// 当子组件出现错误,会触发调用,并携带错误信息
static getDerivedStateFromError(error) {
// render 之前触发
// 返回新的 state
return { hasError: error }
}
componentDidCatch(error, info) {
console.log(error, info)
console.log('此处统计错误,反馈给服务器')
}
render() {
return (
<div>
<h2>Parent组件</h2>
{this.state.hasError ? <h2>网络不稳定,稍后再试</h2> : <Child />}
</div>
)
}
}
注意
错误边界目前只在 Class Component 中实现了,没有在 hooks 中实现(因为Error Boundaries的实现借助了this.setState可以传递callback的特性,useState无法传入回调,所以无法完全对标);
错误边界 无法捕获 以下四种场景中产生的错误:
-
事件处理函数
(因为 Error Boundaries 实现的本质是触发更新,但是事件处理函数不在render或者commit阶段,所以无法进行捕获,如果你需要在事件处理器内部捕获错误,可以使用原生的 try / catch 语句)
- 异步代码(例如
setTimeout
或 requestAnimationFrame
回调函数)
- 服务端渲染(因为触发更新只能在客户端进行,不能在serve端进行)
- 它自身抛出来的错误(因为错误抛出要向父节点冒泡寻找
Error Boundaries
处理,无法处理自身产生的错误)
推荐搭配:
- 父子组件:
props
- 兄弟组件:消息订阅-发布、集中式管理
- 祖孙组件(跨级组件):消息订阅-发布、集中式管理、
conText
(开发用的少,封装插件用的多即 React-Redux)