React错误边界

默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部都被卸载

错误边界：是一个组件，该组件会捕获到在渲染期间（render）子组件发生的错误，并有能力阻止错误继续传播

让某个组件捕获错误

1. 编写生命周期函数getDerivedStateFromError
   ● 静态函数
   ● 运行之间点：渲染子组件的过程中，子组件报错之后，在页面更新之前
   ● 注意只有子组件发生错误之后才会运行
   ● 该函数返回一个对象，React会将该对象的属性值覆盖掉当前组件的state
   ● 参数：错误对象
   ● 通常，该函数用来改变状态
2. 编写生命周期componentDidCatch
   ● 实例方法
   ● 运行时间点：渲染子组件的时候，发生错误，更新页面之后（更新时间靠后，组件都卸载完成了之后才运行这个钩子，运行这个钩子之后再重新构建组件树，性能比较低）
   ● 该函数有两个参数error（报错信息）info（报错位置），通常该函数用于发送给服务器报错信息
   

import React, { PureComponent } from "react";export default class ErrorBounds extends PureComponent {state = {hasError: false,};// 当子组件发生错误的时候就会运行这个生命周期// 这个对象里面的数据会覆盖掉state里面的值// static getDerivedStateFromError() {//   return {//     hasError: true,//   };// }componentDidCatch() {this.setState({hasError: true,});}render() {if (this.state.hasError) {return <div className="">子组件渲染有误</div>;} else {return this.props.children;}}
}

细节

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！