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
推荐阅读
- react|react hooks核心(hooktype和ReactCurrentDispatcher)
- react|react hooks 本质探索 - useMemo、useEffect源码解析
- 机器学习|【机器学习】聚类分析与主成分分析(附例题源码)
- react的”Hello|react的”Hello World !“
- 探索TiDB|探索TiDB Lightning的源码来解决发现的bug
- spring源码|Spring源码解析十八
- Spring源码之九finishRefresh详解
- 《吃透Mybatis源码》|吃透Mybatis源码-缓存的理解(三)
- React内部的性能优化没有达到极致()
- 链表|Node.js 流源码解读之可读流