含义
错误边界： 用来捕捉错误的代码，说到捕捉错误。大家可能都会说 直接try catch 不就行了。对的，try catch 确实是一种在各个语言比较通用的方法。但是在react 组件中，如果某一个组件发生错误，他是会往他的父级组件抛出错误的，然后自己是会被卸载的。如果到跟组件都不能够处理错误，这个组件树就会被卸载，组件树卸载导致的页面效果就是直接的报错。
默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载
错误边界：是一个组件，该组件会捕获到渲染期间（render）子组件发生的错误，并有能力阻止错误继续传播,防止组件树卸载，导致页面啥也没有
使用方式
让某个组件捕获错误
方式一： getDerivedStateFromError
1.编写生命周期函数 getDerivedStateFromError
1.静态函数
2.运行时间点：渲染子组件的过程中，发生错误之后，在更新页面之前
3.注意：只有子组件发生错误，才会运行该函数
4.该函数返回一个对象，React会将该对象的属性覆盖掉当前组件的state，使用的是混合，可以理解使用this.setState({})
5.参数：错误对象
6.通常，该函数用于改变状态
样例代码
import React, { ComponentClass, PureComponent } from 'react' // 捕捉错误的状态 interface IGetErrorCompS { // 是否有错误 hasError: boolean, } interface IProp { // 传入的组件 children: JSX.Element } /** * 捕捉错误的组件 */ class GetErrorComp extends PureComponent<IProp, IGetErrorCompS> { state = { hasError: false } /** * 该方法的执行时间是在子组件发生错误后，更新页面前触发的，返回一个对象来更新状态 * @returns */ static getDerivedStateFromError() { console.log('我是组件GetErrorComp组件，来捕捉我子组件的错误'); return { hasError: true } } render() { return ( <> {this.state.hasError ? '我捕捉到子组件的错误' : this.props.children} </> ) } } /** * 组件A */ class CompA extends PureComponent { render() { return ( <> <h1>我是组件CompA</h1> <GetErrorComp> <CompB /> </GetErrorComp> </> ) } } /** * 组件B */ class CompB extends PureComponent { render() { throw Error('我是CompB组件，我要报错') return ( <> <h1>我是组件CompB</h1> </> ) } } /** * 测试边界组件 */ export default class TestCompErrorBoundary extends PureComponent { render() { return ( <div> <h1>我是跟组件</h1> <CompA /> </div> ) } }
效果
方式二：componentDidCatch
2.编写生命周期函数 componentDidCatch
1.实例方法
2.运行时间点：渲染子组件的过程中，发生错误，更新页面之后，由于其运行时间点比较靠后，因此不太会在该函数中改变状态
3.通常，该函数用于记录错误消息
代码修改
效果
注意细节
某些错误，错误边界组件无法捕获
1.自身的错误
2.异步的错误
3.事件中的错误
总结：错误边界仅处理渲染子组件期间的同步错误
