[JavaScript知识库]React处理错误边界钩子getDerivedStateFromError

getDerivedStateFromError

getDerivedStateFromError是react中类组件的一个方法，它会在子组件出现报错的时候，返回一个形参。
作为类组件的静态方法使用，子组件报错直接执行。

	state={
		hasError:false,
	}
 // 当这个组件的子组件出现报错的时候，
    // 会出发 ，并返回error
    // 开发环境还是会报错，生产环境不会报错 直接显示 要显示的文字
    static getDerivedStateFromError(error) {
        console.log(error,"error")
        return {
            hasError: error
        }
    }

例子：
在render函数中：

 {
        this.state.hasRrror ? "LookDNSdataCom出问题了" : 
        <LookDNSdataCom
	         showDnsList={'4564'}
	         isModalVisible={isModalVisible}
	         title="查看DNS数据"
	         Key='key'
	         Value='value'
	         changeIsModalVisibleState={this.handleCancel}
          >   
         </LookDNSdataCom>
 }

报错之后执行静态方法getDerivedStateFromError

会自动执行getDerivedStateFromError，并打印了error信息；

也成功将要显示的信息展示了出来；

但是我们会发现这个效果过了几秒之后自动又出现报错页面了：

那是因为开发环境还是会报错，生产环境不会报错 直接显示 要显示的文字，白话一些就是这个适用于生产环境，为了生产环境不报错。
开发中我们可以将"LookDNSdataCom出问题了"换成一个错误组件。