一张图概括：
文章图片
这里简单讲解下React工作流程，后文有用。分为三步：
触发更新
render阶段：计算更新会造成的副作用
commit阶段：在宿主环境执行副作用
副作用有很多，比如：
插入DOM节点
执行useEffect回调
好了，让我们进入主题。
什么是Error Boundaries
React提供了两个与错误处理相关的API：
getDerivedStateFromError：静态方法，当错误发生后提供一个机会渲染fallback UI
componentDidCatch：组件实例方法，当错误发生后提供一个机会记录错误信息
使用了这两个API的ClassComponent通常被称为Error Boundaries（错误边界）。
在Error Boundaries的子孙组件中发生的所有React工作流程内的错误都会被Error Boundaries捕获。
通过开篇的介绍可以知道，React工作流程指：
render阶段
commit阶段
考虑如下代码：
class ErrorBoundary extends Component {
componentDidCatch(e) {
console.warn(“发生错误”, e);
}
render() {
return {this.props.children};
}
}
const App = () => (
)
A、B、C作为ErrorBoundary的子孙组件，当发生React工作流程内的错误，都会被ErrorBoundary中的componentDidCatch方法捕获。
步骤1:捕获错误
首先来看工作流程中的错误都是何时被捕获的。
render阶段的核心代码如下，发生的错误会被handleError处理：
do {
try {
// 对于并发更新则是workLoopConcurrentworkLoopSync();
break;
} catch (thrownValue) {
handleError(root, thrownValue);
}
} while (true);
commit阶段包含很多工作，比如：
componentDidMount/Update执行
绑定/解绑ref
useEffect/useLayoutEffectcallback与destroy执行
这些工作会以如下形式执行，发生的错误被captureCommitPhaseError处理：
try {
// …执行某项工作
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
步骤2:构造callback
可以发现，即使没有Error Boundaries，工作流程中的错误已经被React捕获了。而正确的逻辑应该是：
如果存在Error Boundaries，执行对应API
抛出React的提示信息
如果不存在Error Boundaries，抛出未捕获的错误
所以，不管是handleError还是captureCommitPhaseError，都会从发生错误的节点的父节点开始，逐层向上遍历，寻找最近的Error Boundaries。
一旦找到，就会构造：
用于执行Error Boundaries API的callback
用于抛出React提示信息的callback
// ...为了可读性，逻辑有删减
function createClassErrorUpdate() {
if (typeof getDerivedStateFromError === 'function') {
// 用于执行getDerivedStateFromError的callback
update.payload = () => {
return getDerivedStateFromError(error);
};
// 用于抛出React提示信息的callback
update.callback = () => {
logCapturedError(fiber, errorInfo);
};
}
if (inst !== null && typeof inst.componentDidCatch === 'function') {
// 用于执行componentDidCatch的callback
update.callback = function callback() {
this.componentDidCatch(error);
};
}
return update;
}
如果没有找到Error Boundaries，继续向上遍历直到根节点。
此时会构造：
用于抛出未捕获错误的callback
用于抛出React提示信息的callback
// ...为了可读性，逻辑有删减
funffction createRootErrorUpdate() {
// 用于抛出“未捕获的错误”及“React的提示信息”的callback
update.callback = () => {
onUncaughtError(error);
logCapturedError(fiber, errorInfo);
};
return update;
}
执行callback
构造好的callback在什么时候执行呢？
在React中有两个执行用户自定义callback的API：
对于ClassComponent， this.setState(newState, callback)中newState和callback参数都能传递Function作为callback
所以，对于Error Boundaries，相当于主动触发了一次更新：
【Error Boundaries是这么实现的，还挺巧妙】this.setState(() => {
// 用于执行getDerivedStateFromError的callback
}, () => {
// 用于执行componentDidCatch的callback
// 以及 用于抛出React提示信息的callback
})
推荐阅读
- Java|Java基础——数组
- 人工智能|干货！人体姿态估计与运动预测
- java简介|Java是什么（Java能用来干什么？）
- Java|规范的打印日志
- Linux|109 个实用 shell 脚本
- 程序员|【高级Java架构师系统学习】毕业一年萌新的Java大厂面经，最新整理
- Spring注解驱动第十讲--@Autowired使用
- SqlServer|sql server的UPDLOCK、HOLDLOCK试验
- jvm|【JVM】JVM08(java内存模型解析[JMM])
- 技术|为参加2021年蓝桥杯Java软件开发大学B组细心整理常见基础知识、搜索和常用算法解析例题（持续更新...)