大家好，我卡颂。

本文会解说React中Error Boundaries的残缺实现逻辑。

一张图概括：

这里简略解说下React工作流程，后文有用。分为三步：

  1. 触发更新
  2. render阶段：计算更新会造成的副作用
  3. 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 <div>{this.props.children}</div>;  }}const App = () => (    <ErrorBoundary>    <A><B/></A>    <C/>    <ErrorBoundary>)

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/useLayoutEffect callback与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，相当于被动触发了一次更新：

this.setState(() => {  // 用于执行getDerivedStateFromError的callback}, () => {  // 用于执行componentDidCatch的callback  //  以及 用于抛出React提示信息的callback})
  • 对于根节点，执行ReactDOM.render(element, container, callback)中callback参数能传递Function作为callback

所以，对于没有Error Boundaries的状况，相当于被动执行了如下函数：

ReactDOM.render(element, container, () => {// 用于抛出“未捕捉的谬误”及“React的提示信息”的callback})

所以，Error Boundaries的实现能够看作是：React利用已有API实现的新性能。

总结

常常有人问：为什么Hooks没有Error Boundaries？

能够看到，Error Boundaries的实现借助了this.setState能够传递callback的个性，useState临时无奈齐全对标。

最初，给你留个作业，在官网文档介绍了4种状况的谬误不会被Error Boundaries捕捉。

利用本文常识，你能剖析下他们为什么不会被捕捉么？