北京网站建设公司如何排版,什么装修网站做的好的,提供免费空间的网站,免费建设dj网站这是多个feature组合使用后实现的神奇效果#xff0c;在React源码中被广泛使用。当我读源码看到这里时#xff0c;心情经历了#xff1a;懵逼 -- 困惑 -- 沉思 -- 查文档 -- 豁然开朗看完此文#xff0c;相信你也会发出感叹#xff1a;还能这么玩#xff1f;起源我们知道…这是多个feature组合使用后实现的神奇效果在React源码中被广泛使用。当我读源码看到这里时心情经历了懵逼 -- 困惑 -- 沉思 -- 查文档 -- 豁然开朗看完此文相信你也会发出感叹还能这么玩起源我们知道React中有个特性Error Boundary帮助我们在组件发生错误时显示“错误状态”的UI。为了实现这个特性就一定需要捕获到错误。所以在React源码中所有用户代码都被包裹在一个方法中执行。类似如下function wrapper(func) {try {func();} catch(e) {// ...处理错误}
}
比如触发componentDidMount时wrapper(componentDidMount);
本来一切都很完美但是React作为世界级前端框架受众广泛凡事都讲究做到极致。这不有人提issue你们这样在try catch中执行用户代码会让浏览器调试工具的Pause on exceptions失效。Pause on exceptions失效的来龙去脉Pause on exceptions是什么他是浏览器调试工具source面板的一个功能。开启该功能后在运行时遇到会抛出错误的代码代码的执行会自动停在该行就像在该行打了断点一样。比如执行如下代码并开启该功能let a c;
代码的执行会在该行暂停。这个功能可以很方便的帮我们发现未捕获的错误发生的位置。但是当React将用户代码包裹在try catch后即使代码抛出错误也会被catch。Pause on exceptions无法在抛出错误的用户代码处暂停因为error已经被React catch了。除非我们进一步开启Pause on caught exceptions。开启该功能使代码在捕获的错误发生的位置暂停。如何解决对用户来说我写在componentDidMount中的代码明明未捕获错误可是错误发生时Pause on exceptions却失效了确实有些让人困惑。所以在生产环境React继续使用try catch实现wrapper。而在开发环境为了更好的调试体验需要重新实现一套try catch机制包含如下功能捕获用户代码抛出的错误使Error Boundary功能正常运行不捕获用户代码抛出的错误使Pause on exceptions不失效这看似矛盾的功能React如何机智的实现呢如何“捕获”错误让我们先实现第一点捕获用户代码抛出的错误。但是不能使用try catch因为这会让Pause on exceptions失效。解决办法是监听window的error事件。根据GlobalEventHandlers.onerror MDN[1]该事件可以监听到两类错误js运行时错误包括语法错误。window会触发ErrorEvent接口的error事件资源如img或script加载失败错误。加载资源的元素会触发Event接口的error事件可以在window上捕获该错误实现开发环境使用的wrapperDev// 开发环境wrapper
function wrapperDev(func) {function handleWindowError(error) {// 收集错误交给Error Boundary处理}window.addEventListener(error, handleWindowError);func();window.removeEventListener(error, handleWindowError);
}
当func执行时抛出错误会被handleWindowError处理。但是对比生产环境wrapperPrd内func抛出的错误会被catch不会影响后续代码执行。function wrapperPrd(func) {try {func();} catch(e) {// ...处理错误}
}
开发环境func内如果抛出错误代码的执行会中断。比如执行如下代码finish会被打印。wrapperPrd(() {throw Error(123)})
console.log(finish);
但是执行如下代码代码执行中断finish不会被打印。wrapperDev(() {throw Error(123)})
console.log(finish);
如何在不捕获用户代码抛出错误的前提下又能让后续代码的执行不中断呢如何让代码执行不中断答案是通过dispatchEvent触发事件回调在回调中调用用户代码。根据EventTarget.dispatchEvent MDN[2]不同于DOM节点触发的事件比如click事件回调是由event loop异步触发。通过dispatchEvent触发的事件是同步触发并且在事件回调中抛出的错误不会影响dispatchEvent的调用者caller。让我们继续改造wrapperDev。首先创建虚构的DOM节点、事件对象、虚构的事件类型// 创建虚构的DOM节点
const fakeNode document.createElement(fake);
// 创建event
const event document.createEvent(Event);
// 创建虚构的event类型
const evtType fake-event;
初始化事件对象监听事件。在事件回调中调用用户代码。触发事件function callCallback() {fakeNode.removeEventListener(evtType, callCallback, false); func();
}// 监听虚构的事件类型
fakeNode.addEventListener(evtType, callCallback, false);// 初始化事件
event.initEvent(evtType, false, false);// 触发事件
fakeNode.dispatchEvent(event);
完整流程如下function wrapperDev(func) {function handleWindowError(error) {// 收集错误交给Error Boundary处理}function callCallback() {fakeNode.removeEventListener(evtType, callCallback, false); func();}const event document.createEvent(Event);const fakeNode document.createElement(fake);const evtType fake-event;window.addEventListener(error, handleWindowError);fakeNode.addEventListener(evtType, callCallback, false);event.initEvent(evtType, false, false);fakeNode.dispatchEvent(event);window.removeEventListener(error, handleWindowError);
}
当我们调用wrapperDev(() {throw Error(123)})
会依次执行dispatchEvent触发事件回调callCallback在callCallback内执行到throw Error(123)抛出错误callCallback执行中断但调用他的函数会继续执行。Error(123)被window error handler捕获用于Error Boundary其中步骤2使Pause on exceptions不会失效。步骤3、4使得错误被捕获且不会阻止后续代码执行模拟了try catch的效果。总结不得不说React这波操作真细啊。我们实现的迷你wrapper还有很多不足比如没有针对不同浏览器的兼容没有考虑其他代码也触发window error handlerReact源码的完整版wrapper见这里[3]关注魔术师卡颂了解更多React源码相关知识。参考资料[1] GlobalEventHandlers.onerror MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror[2] EventTarget.dispatchEvent MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent[3] 这里: https://github.com/facebook/react/blob/master/packages/shared/invokeGuardedCallbackImpl.js#L63-L237
