十. React的错误边界(Error Boundaries)

错误边界介绍

部分的UI中的JavaScript错误不应该破坏整个应用程序。为了解决这个问题，React16引入了“错误边界”的新概念。
错误边界是 React 组件，它可以在子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用UI ，而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染，生命周期方法以及整个组件树下的构造函数中捕获错误。

注：错误边界无法捕获以下几种情况：

• 事件处理 （了解更多）
• 异步代码 （例如 setTimeout 或 requestAnimationFrame 回调函数）
• 服务端渲染
• 错误边界自身抛出来的错误 （而不是其子组件）
  如果一个类组件定义了一个名为 componentDidCatch(error, info): 的新生命周期方法，它将成为一个错误边界：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }
    return this.props.children;
  }
}

而后你可以像一个普通的组件一样使用：

componentDidCatch() 方法机制类似于 JavaScript catch {}，但是针对组件。仅有类组件可以成为错误边界。实际上，大多数时间你仅想要定义一个错误边界组件并在你的整个应用中使用。
注意错误边界(Error Boundaries) 仅可以捕获其子组件的错误。错误边界无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会向上冒泡至最接近的错误边界。这也类似于 JavaScript 中 catch {} 的工作机制。

如何放置错误边界

错误边界的力度完全取决于你的应用。你可以将其包装在最顶层的路由组件并为用户展示一个 “发生异常（Something went wrong）“的错误信息，就像服务端框架通常处理崩溃一样。你也可以将单独的插件包装在错误边界内部以保护应用不受该组件崩溃的影响。实际上，大多数时间你仅想要定义一个错误边界组件并在你的整个应用中使用。

未捕获错误（Uncaught Errors）的新行为

这一改变有非常重要的意义。自 React 16 开始，任何未被错误边界捕获的错误将会卸载整个 React 组件树。

为何不使用 try/catch?

try / catch 非常棒，但其仅能在命令式代码（imperative code）下可用。
如果你需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch 语句。