理解:
错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面
特点:
只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
使用方式:
getDerivedStateFromError 配合 componentDidCatch
// 生命周期函数,一旦后台组件报错,就会触发
static getDerivedStateFromError(error) {
console.log(error);
// 在render之前触发
// 返回新的state
return {
hasError: true,
};
}
// 渲染组件出错,会调用这个生命周期函数
componentDidCatch(error, info) {
// 统计页面的错误。发送请求到后台去,配合后台产生对应的错误反馈机制,比如邮件或者短信通知
console.log(error, info);
}
示例:
export default class Parent extends Component {
state = {
hasError: '' //用于标识子组件是否产生错误
}
//当Parent的子组件出现报错时候,会触发getDerivedStateFromError调用,并携带错误信息
static getDerivedStateFromError(error) {
console.log('@@@', error)
return { hasError: error }
}
componentDidCatch() {
console.log('此处统计错误,反馈给服务器,用于通知编码人员进行bug的解决')
}
render() {
return (
<div>
<h2>我是Parent组件</h2>
// 可以使用用户心理学方法,网络不稳定等提醒方式
{this.state.hasError ? <h2>当前网络不稳定,稍后再试</h2> : <Child />}
</div>
)
}
}
class Child extends Component {
state = {
users: [
{ id: '001', name: 'tom', age: 18 },
{ id: '002', name: 'jack', age: 19 },
{ id: '003', name: 'peiqi', age: 20 }
]
}
render() {
return (
<div>
<h2>我是Child组件</h2>
{this.state.users.map(userObj => {
return (
<h4 key={userObj.id}>
{userObj.name}----{userObj.age}
</h4>
)
})}
</div>
)
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。