使用错误边界的作用在于，任意的子组件出现渲染错误时，可以自定义处理UI反馈

如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。

class ErrorBoundary extends React.Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    // 这里用的return对象，而不是setState
    return {
      error,
    };
  }

  componentDidCatch(error) {
    console.log("这里也会拿到err，你可以做点想做的事", error);
  }

  render() {
    const { error } = this.state;
    const { children } = this.props;
    if (error) {
      return (
        <div>
          <h2>捕获到了一些错误，下面手动输出到页面中</h2>
          {error.message}
        </div>
      );
    }
    return children;
  }
}

再定义一个按预期抛出错误的组件

const AddOneThowException = (props) => {
  const [num, setNum] = React.useState(0);

  return (
    <div>
      {num > 0 && num.不存在的属性.洗发水}
      num大于0就会报错,不信点击下面按钮加1试试
      <br />
      当前num：{num}
      <button onClick={() => setNum(num + 1)}>加1</button>
    </div>
  );
};

使用时，特地使用了两个错误边界组件来包裹不同的组件来测试效果

export default function App() {
  return (
    <div>
      <ErrorBoundary>
        <AddOneThowException />
      </ErrorBoundary>
      <hr/>
      <ErrorBoundary>
        <AddOneThowException />
      </ErrorBoundary>
    </div>
  );
}

在使用时，将ErrorBoundary组件当成父组件使用，当Child组件中抛出异常时，就会渲染自定义的错误页面

在不使用捕获错误边界时，只会在控台输出错误，UI并不会有反馈
使用捕获错误边界后，可以精准的捕获并输出错误呈现给用户，并可以对错误进行上传分析
测试得知，被错误边界包裹的组件跑错后，并不会影响没有被包裹的组件渲染，类似try catch代码块中，错误被catch到后不会影响代码的执行

页面输出如下
点击上面的加1按钮时，抛出异常，但被定义的错误边界组件捕获到，并输出了定义好的信息组件

可以看到并不会影响第二个组件的渲染

React中的错误边界处理

使用错误边界的作用在于，任意的子组件出现渲染错误时，可以自定义处理UI反馈