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

所以，有时需要对其进行特殊处理。因为没必要因为一个特别小的组件的错误而导致整个页面不可见

错误边界：本质上，就是一个组件，该组件会捕获到 渲染期间(render)子组件 发生的错误，并有能力阻止错误继续向上层组件传播

需要我们自己写出这个通用的错误边界组件

如何让某个组件捕获错误

  1. 给 ErrorBound 组件编写生命周期函数 static getDerivedStateFromError
    1. 静态函数
    2. 该函数的运行时间点：渲染子组件过程中，发生错误之后，在更新到页面之前
    3. 注意：只有子组件发生错误时，才会运行该函数
    4. 该函数得返回一个对象，React会将该对象的属性覆盖掉当前组件的state的属性
    5. 该函数的参数是一个错误对象
    6. 通常，在该函数中改变状态
  2. 给 ErrorBound 组件编写生命周期函数 componentDidCatch
    1. 实例方法
    2. 该函数的运行时间点：渲染子组件的过程中，子组件发生错误，在页面更新完之后，由于其运行时间点比较靠后，因此不太会在该函数中改变状态
    3. 通常，该函数用于记录错误消息 ```jsx import React, { Component } from ‘react’

export default class ErrorBound extends Component {

  1. state = {
  2.     hasError: false,
  3. }
  5. static getDerivedStateFromError(error){
  6.     console.error('发生错误了', error);
  7.     return {
  8.         hasError: true,
  9.     }
  10. }
  12. // componentDidCatch(error, info){
  13. //     console.error('发生错误了', error);
  14. //     console.dir('记录错误信息: ', info);
  15. //     this.setState({
  16. //         hasError: true,
  17. //     })
  18. // }
  20. render() {
  21.     if(this.state.hasError){
  22.         return <h1>该部分组件出现错误了！</h1>
  23.     }
  24.     return this.props.children
  25. }

}

```

细节

某些错误，错误边界组件无法捕获，即那俩函数不会运行

  1. 错误边界组件自身的错误
  2. 异步中的错误
  3. 事件中的错误

因为除了第一种，都不是在渲染期间的错误，所以得老老实实用try-catch处理

总结

ErrorBound只处理渲染期间子组件发生的同步错误