React错误边界的强大

1、官方的介绍：

部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。 为了解决 React 用户的这个问题，React 16引入了一个 “错误边界(Error Boundaries)” 的新概念。

错误边界是 React 组件，它可以 在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI ，而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。

如果一个类组件定义了生命周期方法中的任何一个（或两个）static getDerivedStateFromError() 或 componentDidCatch()，那么它就成了一个错误边界。 使用static getDerivedStateFromError()在抛出错误后渲染回退UI。 使用 componentDidCatch() 来记录错误信息。

2、在我眼里错误边界的强大：

由于我正在做的项目是由非常多的功能页面组成的网站，往往一个功能页面的意外错误能使整个应用奔溃，然后就开始了紧急处理；有了错误边界以后，单个功能页面的错误不会向外扩散，避免了小错误导致大事故！

3、完整代码：

（1）ErrorBoundary组件

import React from "react";

export default class ErrorBoundary extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <h3 style={{ padding: '15px 20px', color: 'red' }}>
          出了点小问题，请联系搬砖小能手！
        </h3>
      );
    }

    return this.props.children;
  }
}

（2）在任何想使用的地方使用

<ErrorBoundary>
   <MySuspense>
      <ItemView
        pageData={item}
        menuList={menuList} />
   </MySuspense>
</ErrorBoundary>

（3）效果：