大家都能看得懂的源码ahooks是怎么处理DOM的？

　　DOM类Hooks使用规范
　　这一章节，大部分参考官方文档的DOM类Hooks使用规范。
　　第一点，ahooks大部分DOM类Hooks都会接收target参数，表示要处理的元素。
　　target支持三种类型React。MutableRefObject（通过useRef保存的DOM）、HTMLElement、（）HTMLElement（一般运用于SSR场景）。
　　第二点，DOM类Hooks的target是支持动态变化的。如下所示：exportdefault（）｛const〔boolean，｛toggle｝〕useBoolean（）；constrefuseRef（null）；constref2useRef（null）；constisHoveringuseHover（boolean？ref：ref2）；return（｛isHovering？hover：leaveHover｝｛isHovering？hover：leaveHover｝）；｝；
　　那ahooks是怎么处理这两点的呢？getTargetElement
　　获取到对应的DOM元素，这一点主要兼容以上第一点的入参规范。假如是函数，则取执行完后的结果。假如拥有current属性，则取current属性的值，兼容React。MutableRefObject类型。最后就是普通的DOM元素。exportfunctiongetTargetElementTextendsTargetType（target：BasicTargetT，defaultElement？：T）｛省略部分代码。。。lettargetElement：TargetValueT；if（isFunction（target））｛支持函数获取targetElementtarget（）；假如ref，则返回current｝elseif（currentintarget）｛targetElementtarget。current；支持DOM｝else｛targetElementtarget；｝returntargetElement；｝useEffectWithTarget
　　这个方法，主要是为了支持第二点，支持target动态变化。
　　其中packageshookssrcutilsuseEffectWithTarget。ts是使用useEffect。import｛useEffect｝fromreact；importcreateEffectWithTargetfrom。createEffectWithTarget；constuseEffectWithTargetcreateEffectWithTarget（useEffect）；exportdefaultuseEffectWithTarget；
　　另外其中packageshookssrcutilsuseLayoutEffectWithTarget。ts是使用useLayoutEffect。import｛useLayoutEffect｝fromreact；importcreateEffectWithTargetfrom。createEffectWithTarget；constuseEffectWithTargetcreateEffectWithTarget（useLayoutEffect）；exportdefaultuseEffectWithTarget；
　　两者都是调用的createEffectWithTarget，只是入参不同。
　　直接重点看这个createEffectWithTarget函数：createEffectWithTarget返回的函数useEffectWithTarget接受三个参数，前两个跟useEffect一样，第三个就是target。useEffectType就是useEffect或者useLayoutEffect。注意这里调用的时候，没传第二个参数，也就是每次都会执行。hasInitRef判断是否已经初始化。lastElementRef记录的是最后一次target元素的列表。lastDepsRef记录的是最后一次的依赖。unLoadRef是执行完effect函数（对应的就是useEffect中的effect函数）的返回值，在组件卸载的时候执行。第一次执行的时候，执行相应的逻辑，并记录下最后一次执行的相应的target元素以及依赖。后面每次执行的时候，都判断目标元素或者依赖是否发生变化，发生变化，则执行对应的effect函数。并更新最后一次执行的依赖。组件卸载的时候，执行unLoadRef。current？。（）函数，并重置hasInitRef为false。constcreateEffectWithTarget（useEffectType：typeofuseEffecttypeofuseLayoutEffect）｛parameffectparamdepsparamtargettargetshouldcompareref。currentvsref。current，domvsdom，（）domvs（）domconstuseEffectWithTarget（effect：EffectCallback，deps：DependencyList，target：BasicTargetBasicTarget〔〕，）｛consthasInitRefuseRef（false）；constlastElementRefuseRef（Elementnull）〔〕（〔〕）；constlastDepsRefuseRefDependencyList（〔〕）；constunLoadRefuseRef（）；useEffect或者useLayoutEffectuseEffectType（（）｛处理DOM目标元素consttargetsArray。isArray（target）？target：〔target〕；constelstargets。map（（item）getTargetElement（item））；initrun首次初始化的时候执行if（！hasInitRef。current）｛hasInitRef。currenttrue；lastElementRef。currentels；lastDepsRef。currentdeps；执行回调中的effect函数unLoadRef。currenteffect（）；return；｝非首次执行的逻辑if（目标元素或者依赖发生变化els。length！lastElementRef。current。length！depsAreSame（els，lastElementRef。current）！depsAreSame（deps，lastDepsRef。current））｛执行上次返回的结果unLoadRef。current？。（）；更新lastElementRef。currentels；lastDepsRef。currentdeps；unLoadRef。currenteffect（）；｝｝）；useUnmount（（）｛卸载unLoadRef。current？。（）；forreactrefreshhasInitRef。currentfalse；｝）；｝；returnuseEffectWithTarget；｝；思考与总结
　　一个优秀的工具库应该有自己的一套输入输出规范，一来能够支持更多的场景，二来可以更好的在内部进行封装处理，三来使用者能够更加快速熟悉和使用相应的功能，能做到举一反三。
　　文章来自https：www。cnblogs。comgopalp16629642。html