DOM在Ahooks中的处理过程

  
 
 

   
  
  
const createEffectWithTarget = (useEffectType: typeof useEffect | typeof useLayoutEffect) => {/**
   
  
  
* @param effect
   
  
  
* @param deps
   
  
  
* @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
   
  
  
*/
   
  
  
const useEffectWithTarget = (
   
  
  
effect: EffectCallback,
   
  
  
deps: DependencyList,
   
  
  
target: BasicTarget| BasicTarget[],
   
  
  
) => {
   
  
  
const hasInitRef = useRef(false);
   
  
  
const lastElementRef = useRef<(Element | null)[]>([]);
   
  
  
const lastDepsRef = useRef([]);
   
  
  
const unLoadRef = useRef();
   
  
  
// useEffect 或者 useLayoutEffect
   
  
  
useEffectType(() => {
   
  
  
// 处理 DOM 目标元素
   
  
  
const targets = Array.isArray(target) ? target : [target];
   
  
  
const els = targets.map((item) => getTargetElement(item));
   
  
  
// init run
   
  
  
// 首次初始化的时候执行
   
  
  
if (!hasInitRef.current) {
   
  
  
hasInitRef.current = true;
   
  
  
lastElementRef.current = els;
   
  
  
lastDepsRef.current = deps;
   
  
  
// 执行回调中的 effect 函数
   
  
  
unLoadRef.current = effect();
   
  
  
return;
   
  
  
}
   
  
  
// 非首次执行的逻辑
   
  
  
if (
   
  
  
// 目标元素或者依赖发生变化
   
  
  
els.length !== lastElementRef.current.length ||
   
  
  
!depsAreSame(els, lastElementRef.current) ||
   
  
  
!depsAreSame(deps, lastDepsRef.current)
   
  
  
) {
   
  
  
// 执行上次返回的结果
   
  
  
unLoadRef.current?.();
   
  
  
// 更新
   
  
  
lastElementRef.current = els;
   
  
  
lastDepsRef.current = deps;
   
  
  
unLoadRef.current = effect();
   
  
  
}
   
  
  
});
   
  
  
useUnmount(() => {
   
  
  
// 卸载
   
  
  
unLoadRef.current?.();
   
  
  
// for react-refresh
   
  
  
hasInitRef.current = false;
   
  
  
});
   
  
  
};
   
  
  
return useEffectWithTarget;
   
  
  
};