关于前端:react-hooks源码核心ReactCurrentDispatcher

51次阅读

共计 2705 个字符，预计需要花费 7 分钟才能阅读完成。

咱们大部分的 use 逻辑（包含 useState、useCallback 等等，所有的 use）都是写在 react-dom 这个库里，然而 ReactCurrentDispatcher 的逻辑有一部分在 react 库里。

本篇次要梳理 ReactCurrentDispatcher 这个对象在整个 react 中的作用

在 react 库中，定义了全局变量：

/**
* Keeps track of the current dispatcher.
*/
var ReactCurrentDispatcher = {
/**
 * @internal
 * @type {ReactComponent}
 */
  current: null
};

// .... 很多行之后

var ReactSharedInternals$1 = {
    ReactCurrentDispatcher: ReactCurrentDispatcher,
    ReactCurrentOwner: ReactCurrentOwner,
    IsSomeRendererActing: IsSomeRendererActing,
    ReactCurrentBatchConfig: ReactCurrentBatchConfig,
    // Used by renderers to avoid bundling object-assign twice in UMD bundles:
    assign: assign,
    // Re-export the schedule API(s) for UMD bundles.
    // This avoids introducing a dependency on a new UMD global in a minor update,
    // Since that would be a breaking change (e.g. for all existing CodeSandboxes).
    // This re-export is only required for UMD bundles;
    // CJS bundles use the shared NPM package.
    Scheduler: Scheduler,
    SchedulerTracing: SchedulerTracing
  };
    
  // ... 很多行之后
  
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals$1;

在 react-dom 中，有这样的引入值：

var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

// ... 很多行之后

var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;

// ... 很多行之后

var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
    ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig;

ReactCurrentDispatcher$1，其实就是一个对象。对象内只有一个 key：current

ReactCurrentDispatcher 的作用，其实就是用来保留以下对象的：
HooksDispatcherOnMountInDEV
HooksDispatcherOnMountWithHookTypesInDEV
HooksDispatcherOnUpdateInDEV
HooksDispatcherOnRerenderInDEV
InvalidNestedHooksDispatcherOnMountInDEV
InvalidNestedHooksDispatcherOnUpdateInDEV
InvalidNestedHooksDispatcherOnRerenderInDEV
而这些对象中，都实现残缺的一套 use。
代码构造大略是这样：

ReactCurrentDispatcher = {
  HooksDispatcherOnMountInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
  HooksDispatcherOnMountWithHookTypesInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
  HooksDispatcherOnUpdateInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
  HooksDispatcherOnRerenderInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
  InvalidNestedHooksDispatcherOnMountInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
  InvalidNestedHooksDispatcherOnUpdateInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
  InvalidNestedHooksDispatcherOnRerenderInDEV: {useState: function() {...},
    useCallback: function() {...},
    useEffect: function() {...},
    ... 其余 use
  },
};

当然代码中对专用逻辑局部做了抽离，并没有冗余的逻辑和代码。
咱们会在这篇文章中阐明 hooktype，也就是 ReactCurrentDispatcher 的实现逻辑：
react hooks 外围：hooktype 和 ReactCurrentDispatcher

正文完