React16源码: React中commit阶段的invokeGuardedCallback的源码实现

本文主要是介绍React16源码: React中commit阶段的invokeGuardedCallback的源码实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

invokeGuardedCallback


1 )概述

  • 在 commit 阶段中在 DEV 环境中调用了 invokeGuardedCallback 这个方法
  • 这个方法是在开发过程中被使用,用于捕获错误,协助开发调试的方法

2 )概述

定位到 packages/shared/ReactErrorUtils.js#L41

进入 invokeGuardedCallback

const reporter = {onError(error: mixed) {hasError = true;caughtError = error;},
};/*** Call a function while guarding against errors that happens within it.* Returns an error if it throws, otherwise null.** In production, this is implemented using a try-catch. The reason we don't* use a try-catch directly is so that we can swap out a different* implementation in DEV mode.** @param {String} name of the guard to use for logging or debugging* @param {Function} func The function to invoke* @param {*} context The context to use when calling the function* @param {...*} args Arguments for function*/
export function invokeGuardedCallback<A, B, C, D, E, F, Context>(name: string | null,func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,context: Context,a: A,b: B,c: C,d: D,e: E,f: F,
): void {hasError = false;caughtError = null;invokeGuardedCallbackImpl.apply(reporter, arguments);
}
  • 这个方法它实际调用了 invokeGuardedCallbackImpl.apply(reporter, arguments);
  • 这个 reporter,是定义的一个全局对象
  • 内部初始化了两个变量 hasErrorcaughtError
  • 看下 invokeGuardedCallbackImpl
    // https://github.com/facebook/react/blob/v16.6.3/packages/shared/invokeGuardedCallbackImpl.js
    let invokeGuardedCallbackImpl = function<A, B, C, D, E, F, Context>(name: string | null,func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,context: Context,a: A,b: B,c: C,d: D,e: E,f: F,
    ) {const funcArgs = Array.prototype.slice.call(arguments, 3);try {func.apply(context, funcArgs);} catch (error) {this.onError(error);}
    };if (__DEV__) {// In DEV mode, we swap out invokeGuardedCallback for a special version// that plays more nicely with the browser's DevTools. The idea is to preserve// "Pause on exceptions" behavior. Because React wraps all user-provided// functions in invokeGuardedCallback, and the production version of// invokeGuardedCallback uses a try-catch, all user exceptions are treated// like caught exceptions, and the DevTools won't pause unless the developer// takes the extra step of enabling pause on caught exceptions. This is// untintuitive, though, because even though React has caught the error, from// the developer's perspective, the error is uncaught.//// To preserve the expected "Pause on exceptions" behavior, we don't use a// try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake// DOM node, and call the user-provided callback from inside an event handler// for that fake event. If the callback throws, the error is "captured" using// a global event handler. But because the error happens in a different// event loop context, it does not interrupt the normal program flow.// Effectively, this gives us try-catch behavior without actually using// try-catch. Neat!// Check that the browser supports the APIs we need to implement our special// DEV version of invokeGuardedCallbackif (typeof window !== 'undefined' &&typeof window.dispatchEvent === 'function' &&typeof document !== 'undefined' &&typeof document.createEvent === 'function') {const fakeNode = document.createElement('react');const invokeGuardedCallbackDev = function<A, B, C, D, E, F, Context>(name: string | null,func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,context: Context,a: A,b: B,c: C,d: D,e: E,f: F,) {// If document doesn't exist we know for sure we will crash in this method// when we call document.createEvent(). However this can cause confusing// errors: https://github.com/facebookincubator/create-react-app/issues/3482// So we preemptively throw with a better message instead.// 首先会有一大串长的提醒,说明当前这个环境是不支持的invariant(typeof document !== 'undefined','The `document` global was defined when React was initialized, but is not ' +'defined anymore. This can happen in a test environment if a component ' +'schedules an update from an asynchronous callback, but the test has already ' +'finished running. To solve this, you can either unmount the component at ' +'the end of your test (and ensure that any asynchronous operations get ' +'canceled in `componentWillUnmount`), or you can change the test itself ' +'to be asynchronous.',);// 它创建了一个 event 对象const evt = document.createEvent('Event');// Keeps track of whether the user-provided callback threw an error. We// set this to true at the beginning, then set it to false right after// calling the function. If the function errors, `didError` will never be// set to false. This strategy works even if the browser is flaky and// fails to call our global error handler, because it doesn't rely on// the error event at all.// 声明了 didError 为truelet didError = true;// Keeps track of the value of window.event so that we can reset it// during the callback to let user code access window.event in the// browsers that support it.let windowEvent = window.event;// Keeps track of the descriptor of window.event to restore it after event// dispatching: https://github.com/facebook/react/issues/13688// 来获取 window.event 的对象描述符const windowEventDescriptor = Object.getOwnPropertyDescriptor(window,'event',);// Create an event handler for our fake event. We will synchronously// dispatch our fake event using `dispatchEvent`. Inside the handler, we// call the user-provided callback.// 把前面3个参数给它拿出来,剩下的都是作为它的argumentsconst funcArgs = Array.prototype.slice.call(arguments, 3);// 它声明了一个叫做callcallback的一个方法。function callCallback() {// We immediately remove the callback from event listeners so that// nested `invokeGuardedCallback` calls do not clash. Otherwise, a// nested call would trigger the fake event handlers of any call higher// in the stack.fakeNode.removeEventListener(evtType, callCallback, false); // 移除事件监听// We check for window.hasOwnProperty('event') to prevent the// window.event assignment in both IE <= 10 as they throw an error// "Member not found" in strict mode, and in Firefox which does not// support window.event.// 对 window.event 进行兼容处理if (typeof window.event !== 'undefined' &&window.hasOwnProperty('event')) {window.event = windowEvent;}// 使用 context 调用 func 传入 funcArgs 后续的参数// 注意,在 dev 时,这个 context 可能是 null, 可以向上追溯func.apply(context, funcArgs);didError = false;}// Create a global error event handler. We use this to capture the value// that was thrown. It's possible that this error handler will fire more// than once; for example, if non-React code also calls `dispatchEvent`// and a handler for that event throws. We should be resilient to most of// those cases. Even if our error event handler fires more than once, the// last error event is always used. If the callback actually does error,// we know that the last error event is the correct one, because it's not// possible for anything else to have happened in between our callback// erroring and the code that follows the `dispatchEvent` call below. If// the callback doesn't error, but the error event was fired, we know to// ignore it because `didError` will be false, as described above.// 声明一堆和 error 相关的变量let error;// Use this to track whether the error event is ever called.let didSetError = false;let isCrossOriginError = false;function handleWindowError(event) {error = event.error;didSetError = true;// 这种情况下是 跨域错误if (error === null && event.colno === 0 && event.lineno === 0) {isCrossOriginError = true;}// 别的地方,有去处理 window.onerror,这里被阻塞了if (event.defaultPrevented) {// Some other error handler has prevented default.// Browsers silence the error report if this happens.// We'll remember this to later decide whether to log it or not.if (error != null && typeof error === 'object') {try {error._suppressLogging = true; // 设置当前标识} catch (inner) {// Ignore.}}}}// Create a fake event type.const evtType = `react-${name ? name : 'invokeguardedcallback'}`;// Attach our event handlers// 注册两个事件window.addEventListener('error', handleWindowError);fakeNode.addEventListener(evtType, callCallback, false);// Synchronously dispatch our fake event. If the user-provided function// errors, it will trigger our global error handler.// 初始化事件,并立即触发 dispatchEventevt.initEvent(evtType, false, false);fakeNode.dispatchEvent(evt); // 触发完,会立即调用 callbackif (windowEventDescriptor) {Object.defineProperty(window, 'event', windowEventDescriptor);}if (didError) {// 出错了,但是 handleWindowError 没有被调用的处理if (!didSetError) {// The callback errored, but the error event never fired.error = new Error('An error was thrown inside one of your components, but React ' +"doesn't know what it was. This is likely due to browser " +'flakiness. React does its best to preserve the "Pause on ' +'exceptions" behavior of the DevTools, which requires some ' +"DEV-mode only tricks. It's possible that these don't work in " +'your browser. Try triggering the error in production mode, ' +'or switching to a modern browser. If you suspect that this is ' +'actually an issue with React, please file an issue.',);} else if (isCrossOriginError) {error = new Error("A cross-origin error was thrown. React doesn't have access to " +'the actual error object in development. ' +'See https://fb.me/react-crossorigin-error for more information.',);}this.onError(error);}// Remove our event listeners// 最终移除事件监听window.removeEventListener('error', handleWindowError);};invokeGuardedCallbackImpl = invokeGuardedCallbackDev;}
    }
    
    • 它接收一系列的参数, 后续几个参数,它通过a,b,c,d,e,f来进行了一个命名
    • 看着前期的定义好像很简单,但是下面有一个 DEV 的判断
    • 这个方法 invokeGuardedCallbackDev 是最终 export 出去的
    • 注意,在上述 handleWindowError 中,
      • 被触发相关事件时,就会执行这个回调函数
      • 1 )当遇到跨域错误时,会做相关检测,并设置相关标识
      • 2 )如果遇到 onError被阻塞,也是做一些标识处理
    • 上述 evtType 的事件,一经调用,就会执行 上述的 callCallback 方法
      • callCallback 方法一旦被执行,就会执行参数中的 func 方法
      • 当后续 func 执行中出现错误,didError = false 就不会被执行
      • 同时,出现错误,会调用 handleWindowError 这个方法,里面的变量也会发生变化
    • 所以,里面的变量在整体流程中,非常有用
    • 还有,就是 在最后的两个嵌套 if中 if (didError) { if (!didSetError) {} else if(isCrossOriginError) }
      • 这时候会抛出错误, 分成两种情况,
      • 参考:https://legacy.reactjs.org/docs/cross-origin-errors.html
    • 为何不直接用try catch,而要用这种事件的方式来触发呢?
      • 因为会存在这么一个问题,在浏览器的调试工具中
      • 比方说,Sources面板,里面有个 Pause on exceptions 功能
      • 如果有try catch会自行处理,但开发者本意不希望它停在那边,选中 Pause on caught exceptions
      • 这样,即便通过trycatch捕获了这个错误,一旦代码报错了,我勾中了这个之后,代码也会因为报错而停止
      • 开启该功能,使代码在捕获的错误发生的位置暂停,这样更方便定位问题
      • 对于要去调试像 componentDidCatch 这种在组件内去处理错误的这种情况
      • 它就会因为代码停在这里,而导致我们没有办法去调试这部分相关的功能
      • 所以react为了防止这种情况的出现了,实现了这么一种方式

这篇关于React16源码: React中commit阶段的invokeGuardedCallback的源码实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/646101

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo