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

最新推荐文章于 2024-08-23 08:17:02 发布

原创

最新推荐文章于 2024-08-23 08:17:02 发布 · 1.2k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

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: