当前位置: 首页 > Web前端 > JavaScript

Reacthooks源码核心:ReactCurrentDispatcher

时间:2023-03-27 01:31:17 JavaScript

我们大部分的使用逻辑(包括useState、useCallback等,全部使用)都是写在react-dom库中的,但是ReactCurrentDispatcher的部分逻辑在react库中。本文主要梳理一下ReactCurrentDispatcher对象在整个react中的作用在react库中定义了全局变量:/***跟踪当前dispatcher.*/varReactCurrentDispatcher={/***@internal*@type{ReactComponent}*/current:null};//...许多行之后varReactSharedInternals$1={ReactCurrentDispatcher:ReactCurrentDispatcher,ReactCurrentOwner:ReactCurrentOwner,IsSomeRendererActing:IsSomeRendererActing,ReactCurrentBatchConfig:ReactCurrentBatchConfig,//UlingobjunderstotwiceinUMDbundle:assign:assign,//重新导出UMD包的调度API。//这避免了在次要更新中引入对新UMD全局的依赖,//因为这将是一个重大更改(例如,对于所有现有的CodeSandbox)。//只有UMD包需要重新导出;//CJS包使用共享的NPM包。调度器:调度器,SchedulerTracing:调度器跟踪};//...导出后多行。__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=ReactSharedInternals$1;Inreact-dom,thereisthisimportedvalue:varReactSharedInternals=React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;//...manylineslatervarReactCurrentDispatcher=ReactSharedInternals.React/$varCurrentRespatch...manylineslater;=ReactSharedInternals.ReactCurrentDispatcher,ReactCurrentBatchConfig$1=ReactSharedInternals.ReactCurrentBatchConfig;ReactCurrentDispatcher$1,其实就是一个对象对象内只有一个key:currentReactCurrentDispatcher的作用,其实就是用来保存以下对象的:HooksDispatcherOnMountInDEVHooksDispatcherOnMountWithHookTypesInDEVHooksDispatcherOnUpdateInDEVHooksDispatcherOnRerenderInDEVInvalidNestedHooksDispatcherOnMountInDEVInvalidNestedHooksDispatcherOnUpdateInDEVInvalidNestedHooksDispatcherOnRerenderInDEV而这些对象中,都实现完整的一套use.代码结构大纲是这样的:ReactCurrentDispatcher={HooksDispatcherOnMountInDEV:{useState:function(){...},useCallback:function(){...},useEffect:function(){...},...其他use},HooksDispatcherOnMountWithHookTypesInDEV:{useState:function(){...},useCallback:function(){...},useEffect:function(){...},...其他使用},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(){...},...其他使用},InvalidNestedHooksDispatcherOnRerenderInDEV:{useState:function(){...},useCallback:function(){...},useEffect:function(){...},...其他用途},};当然,代码是公共的,逻辑部分是分开的,没有多余的逻辑和代码。我们将在本文中讲解hooktype,即ReactCurrentDispatcher的实现逻辑:reacthookscore:hooktype和ReactCurrentDispatcher