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;
    }
  }
}