本文主要是介绍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
,是定义的一个全局对象 - 内部初始化了两个变量
hasError
和caughtError
- 看下
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
这个方法,里面的变量也会发生变化
- callCallback 方法一旦被执行,就会执行参数中的
- 所以,里面的变量在整体流程中,非常有用
- 还有,就是 在最后的两个嵌套 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的源码实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!