React@16.x（18）错误边界

1，什么是错误边界

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

全部卸载：指整个应用都被卸载，<div id="root"></div> 没有子元素了。
一般此时 React 会在控制台打印错误消息。

举例：

import React, { PureComponent } from "react";function ChildA() {return (<><h1>childA</h1><ChildB></ChildB></>);
}function ChildB() {const obj = {};console.log(obj.a.b);return <h1>childB</h1>;
}function ChildC() {return <h1>childC</h1>;
}export default class App extends PureComponent {render() {return (<><ChildA /><ChildC /></>);}
}

错误边界：

指的是一个自定义的组件，它可以捕获子组件在渲染期间发生的错误，并有能力阻止继续往上传播。

2，捕获子组件的错误

可以通过2个生命周期函数来捕获。

2.1，static getDerivedStateFromError

2.1.1，特点

1，它是一个静态函数。

2，运行时间点：渲染子组件的过程中，发生错误之后，更新页面之前。

3，该函数返回一个对象， React 会用该对象的属性覆盖掉当前组件的 state。

不能使用 this.setState()，是因为它是静态函数。

4，通常，该函数用于改变状态。

也就是说，通过改变状态：选择不渲染出错的子组件，而是渲染指定的内容。

2.1.2，举例

新增一个组件

import React, { Component } from "react";export default class ErroBound extends Component {state = {hasError: false,};static getDerivedStateFromError(error) {return {hasError: true,};}render() {if (this.state.hasError) {return <div>错误了</div>;}return this.props.children;}
}

修改上面的例子：

export default class App extends PureComponent {render() {return (<><ErroBound><ChildA></ChildA></ErroBound><ChildC></ChildC></>);}
}

这样就可以捕获到报错的组件，不影响组件 ChildC 的正常渲染了。

2.2，componentDidCatch

2.2.1，特点

1，实例的方法。

2，运行时间点：渲染子组件的过程中，发生错误更新页面之后。因为时间点靠后，所以不太会在该函数中改变状态（虽然这样使用没有问题。）

3，通常用于记录错误日志进行上报。

2.2.2，举例

// 其他代码不变。
export default class ErroBound extends Component {// error 是错误对象。// info 是一个多层级的对象，标记报错在哪个组件了。componentDidCatch(error, info) {this.setState({hasError: true,});}
}

3，错误边界组件无法捕获的错误

3.1，自身的错误

3.2，异步的错误

比如，将 ChildB 组件做如下更改，初次渲染没有问题。1s 之后就会报错。

function ChildB() {setTimeout(() => {const obj = {};console.log(obj.a.b);}, 1000);return <h1>childB</h1>;
}

3.3，事件中的错误

比如，将 ChildB 组件做如下更改，初次渲染没有问题。点击就会报错。

function ChildB() {return (<h1onClick={() => {const obj = {};console.log(obj.a.b);}}>childB</h1>);
}

因为这2个生命周期函数，仅会在首次渲染子组件期间执行，所以异步的错误就捕获不到了。

一句话总结：仅处理子组件渲染期间的同步错误。

---

以上。