likes
comments
collection
share

react hooks源码核心:ReactCurrentDispatcher

作者站长头像
站长
· 阅读数 30

我们大部分的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的作用,其实就是用来保存以下对象的:HooksDispatcherOnMountInDEVHooksDispatcherOnMountWithHookTypesInDEVHooksDispatcherOnUpdateInDEVHooksDispatcherOnRerenderInDEVInvalidNestedHooksDispatcherOnMountInDEVInvalidNestedHooksDispatcherOnUpdateInDEVInvalidNestedHooksDispatcherOnRerenderInDEV而这些对象中,都实现完整的一套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