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

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU