react|react hooks源码核心(ReactCurrentDispatcher)

我们大部分的use逻辑(包括useState、useCallback等等,所有的use)都是写在react-dom这个库里,但是ReactCurrentDispatcher的逻辑有一部分在react库里。
本篇主要梳理ReactCurrentDispatcher这个对象在整个react中的作用
【react|react hooks源码核心(ReactCurrentDispatcher)】在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

    推荐阅读