咱们大部分的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