前言

近年前端技术层出不穷，React 也是程序员间讨论最多的 Javascript 框架之一。借这个机会开始学习 React，并把笔记作为 React 基础教程系列（参考 React 官网）。

因为属于入门，不太适合对 React 有经验的同学，但希望到此的同学多少都有所收获。

概要

官网说明：

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

错误边界也是 React 组件，并且有两个作用：

1. 捕获子组件中的错误
2. 当发生问题时，渲染备用 UI

示例

下面示范"错误边界"的用法：

模拟一个组件出现错误，强制 throw 抛出 Error 对象：

父组件 Clock 的 JSX 中，引用子组件 Error ：

实现 getDerivedStateFromError 方法，将 error 交给 state 状态对象：

当 state 更新后，将重新触发 render 方法，从而执行到 if 逻辑，渲染出降级的 UI 内容：

当然也可以通过 componentDidCatch 方法显示更多的错误信息：

页面 HTML 效果图：

父组件 Clock 是个定时器组件，而子组件 Error 指定时间后会抛出错误，最后被 Clock 组件接收到，渲染降级 UI。

相关 API

getDerivedStateFromError() 会处理有关 error 信息，然后 return 的结果交给组件的状态对象 state 。

错误信息示意：

componentDidCatch() 具备更多错误的信息，就如官方建议，可以把错误日志上报给服务器，以便排查问题。

错误信息示意：

总结

以上就是关于 React 错误边界中，getDerivedStateFromError 以及 componentDidCatch 用法示例。

反问 Vue 是否有类似的方法呢？

答案也是有的，你也可以在 Vue 对应的 API 章节中找到：

errorHandler 和 errorCaptured 分别可以在全局范围和组件内使用，用于异常的捕获。（我居然一次都没用过，幸好 React 把这块概念单独领了出来，让我再次温习了下）

为了更好的阅读体验，可以在文章底下的“了解更多”中查看原文。