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