一张图片总结：这里简单介绍一下React的工作流程，以后会有用。分为三个步骤：触发updaterender阶段：计算updatecommit阶段带来的sideeffects：executionsideeffectsinthehostenvironmentsideeffects有很多，比如：插入一个DOM节点，执行useEffectcallback好吧，下面进入正题。什么是ErrorBoundariesReact提供了两个错误处理相关的API：getDerivedStateFromError：静态方法，当错误发生时，提供了一个renderfallback的机会UIcomponentDidCatch：组件实例方法，当错误发生时，它提供了记录错误信息的机会2API的ClassComponent通常称为ErrorBoundaries（错误边界）。错误边界的后代组件中发生的React工作流中的所有错误都将被错误边界捕获。从一开始的介绍我们可以知道，React的工作流程是指：render阶段的commit阶段考虑了如下代码：classErrorBoundaryextendsComponent{componentDidCatch(e){console.warn("Anerroroccurred",e);}render(){return
{this.props.children}
;}}constApp=()=>(
)A,B,C作为ErrorBoundary的后代组件，当React工作流发生错误时，会被ErrorBoundary中的componentDidCatch方法捕获。第1步：捕获错误首先查看工作流中的错误何时被捕获。render阶段的核心代码如下，出现的错误会由handleError处理：do{try{//对于并发更新，是workLoopConcurrentworkLoopSync();break;}catch(thrownValue){handleError(root,thrownValue);}}同时(真);commit阶段包括很多工作，例如：componentDidMount/Update执行绑定/解绑refuseEffect/useLayoutEffectcallback和destroy以如下形式执行这些任务，发生的错误由captureCommitPhaseError处理：try{//...executeacertaintask}catch(error){captureCommitPhaseError(fiber,fiber.return,error);}第二步：构造回调发现即使没有ErrorBoundaries，工作流中的错误也已经被React捕获了。正确的逻辑应该是：如果有ErrorBoundaries，则执行相应的API，抛出React的提示信息；如果没有错误边界，抛出一个未捕获的错误。因此，无论是handleError还是captureCommitPhaseError，都会从发生错误的节点的父节点开始，逐层向上遍历，找到最近的ErrorBoundaries。一旦找到，就会构造：用于执行ErrorBoundariesAPI的回调，用于抛出React提示信息的回调//...为了可读性，逻辑已被删除functioncreateClassErrorUpdate(){if(typeofgetDerivedStateFromError==='function'){//callbackupdate.payload用于执行getDerivedStateFromError=()=>{returngetDerivedStateFromError(error);};//callbackupdate.callback用于抛出React提示消息=()=>{logCapturedError(fiber,errorInfo);};}if(inst!==null&&typeofinst.componentDidCatch==='function'){//用于执行componentDidCatchcallbackupdate.callback=functioncallback(){this.componentDidCatch(error);};}returnupdate;}如果没有找到ErrorBoundaries，继续向上遍历到根节点。这时候会构造：用于抛出未捕获错误的回调用于抛出React提示信息的回调//...为了可读性，删除了逻辑funffctioncreateRootErrorUpdate(){//用于抛出"notcallbackupdate.callback=()=>{onUncaughtError(error);logCapturedError(fiber,errorInfo);};returnupdate;}构造回调执行时执行回调呢子呢？在React中有两个API是执行user的-definedcallbacks：对于ClassComponent，this.setState(newState,callback)中的newState和callback参数都可以通过Function作为回调。因此，对于ErrorBoundaries，相当于主动触发更新：this.setState(()=>{//用于执行getDerivedStateFromError的回调},()=>{//用于执行componentDidCatch的回调//以及用于抛出React提示的回调})
