Ahooks 是怎么處理 DOM 的？
本篇文章探討一下 ahooks 對(duì) DOM 類(lèi) Hooks 使用規(guī)范，以及源碼中是如何去做處理的。
DOM 類(lèi) Hooks 使用規(guī)范
這一章節(jié)，大部分參考官方文檔的 DOM 類(lèi) Hooks 使用規(guī)范[1]。
第一點(diǎn)，ahooks 大部分 DOM 類(lèi) Hooks 都會(huì)接收 target 參數(shù)，表示要處理的元素。
target 支持三種類(lèi)型 React.MutableRefObject（通過(guò) useRef 保存的 DOM）、HTMLElement、() => HTMLElement（一般運(yùn)用于 SSR 場(chǎng)景）。
第二點(diǎn)，DOM 類(lèi) Hooks 的 target 是支持動(dòng)態(tài)變化的。如下所示：
export default () => {
const [boolean, { toggle }] = useBoolean();
const ref = useRef(null);
const ref2 = useRef(null);
const isHovering = useHover(boolean ? ref : ref2);
return (
<>
<div ref={ref}>{isHovering ? 'hover' : 'leaveHover'}</div>
<div ref={ref2}>{isHovering ? 'hover' : 'leaveHover'}</div>
</>
);
};
那 ahooks 是怎么處理這兩點(diǎn)的呢？
getTargetElement
獲取到對(duì)應(yīng)的 DOM 元素，這一點(diǎn)主要兼容以上第一點(diǎn)的入?yún)⒁?guī)范。
- 假如是函數(shù)，則取執(zhí)行完后的結(jié)果。
- 假如擁有 current 屬性，則取 current 屬性的值，兼容React.MutableRefObject 類(lèi)型。
- 最后就是普通的 DOM 元素。
export function getTargetElement<T extends TargetType>(target: BasicTarget<T>, defaultElement?: T) {
// 省略部分代碼...
let targetElement: TargetValue<T>;
if (isFunction(target)) {
// 支持函數(shù)獲取
targetElement = target();
// 假如 ref，則返回 current
} else if ('current' in target) {
targetElement = target.current;
// 支持 DOM
} else {
targetElement = target;
}
return targetElement;
}
useEffectWithTarget
這個(gè)方法，主要是為了支持第二點(diǎn)，支持 target 動(dòng)態(tài)變化。
其中 packages/hooks/src/utils/useEffectWithTarget.ts 是使用 useEffect。
import { useEffect } from 'react';
import createEffectWithTarget from './createEffectWithTarget';
const useEffectWithTarget = createEffectWithTarget(useEffect);
export default useEffectWithTarget;
另外 其中 packages/hooks/src/utils/useLayoutEffectWithTarget.ts 是使用 useLayoutEffect。
import { useLayoutEffect } from 'react';
import createEffectWithTarget from './createEffectWithTarget';
const useEffectWithTarget = createEffectWithTarget(useLayoutEffect);
export default useEffectWithTarget;
兩者都是調(diào)用的 createEffectWithTarget，只是入?yún)⒉煌?/p>
直接重點(diǎn)看這個(gè) createEffectWithTarget 函數(shù)：
- createEffectWithTarget 返回的函數(shù)useEffectWithTarget接受三個(gè)參數(shù)，前兩個(gè)跟 useEffect 一樣，第三個(gè)就是 target。
- useEffectType 就是 useEffect 或者 useLayoutEffect。注意這里調(diào)用的時(shí)候，沒(méi)傳第二個(gè)參數(shù)，也就是每次都會(huì)執(zhí)行。
- hasInitRef 判斷是否已經(jīng)初始化。lastElementRef 記錄的是最后一次 target 元素的列表。lastDepsRef 記錄的是最后一次的依賴(lài)。unLoadRef 是執(zhí)行完 effect 函數(shù)（對(duì)應(yīng)的就是 useEffect 中的 effect 函數(shù)）的返回值，在組件卸載的時(shí)候執(zhí)行。
- 第一次執(zhí)行的時(shí)候，執(zhí)行相應(yīng)的邏輯，并記錄下最后一次執(zhí)行的相應(yīng)的 target 元素以及依賴(lài)。
- 后面每次執(zhí)行的時(shí)候，都判斷目標(biāo)元素或者依賴(lài)是否發(fā)生變化，發(fā)生變化，則執(zhí)行對(duì)應(yīng)的 effect 函數(shù)。并更新最后一次執(zhí)行的依賴(lài)。
- 組件卸載的時(shí)候，執(zhí)行 unLoadRef.current?.() 函數(shù)，并重置 hasInitRef 為 false。
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<any> | BasicTarget<any>[],
) => {
const hasInitRef = useRef(false);
const lastElementRef = useRef<(Element | null)[]>([]);
const lastDepsRef = useRef<DependencyList>([]);
const unLoadRef = useRef<any>();
// useEffect 或者 useLayoutEffect
useEffectType(() => {
// 處理 DOM 目標(biāo)元素
const targets = Array.isArray(target) ? target : [target];
const els = targets.map((item) => getTargetElement(item));
// init run
// 首次初始化的時(shí)候執(zhí)行
if (!hasInitRef.current) {
hasInitRef.current = true;
lastElementRef.current = els;
lastDepsRef.current = deps;
// 執(zhí)行回調(diào)中的 effect 函數(shù)
unLoadRef.current = effect();
return;
}
// 非首次執(zhí)行的邏輯
if (
// 目標(biāo)元素或者依賴(lài)發(fā)生變化
els.length !== lastElementRef.current.length ||
!depsAreSame(els, lastElementRef.current) ||
!depsAreSame(deps, lastDepsRef.current)
) {
// 執(zhí)行上次返回的結(jié)果
unLoadRef.current?.();
// 更新
lastElementRef.current = els;
lastDepsRef.current = deps;
unLoadRef.current = effect();
}
});
useUnmount(() => {
// 卸載
unLoadRef.current?.();
// for react-refresh
hasInitRef.current = false;
});
};
return useEffectWithTarget;
};
思考與總結(jié)
一個(gè)優(yōu)秀的工具庫(kù)應(yīng)該有自己的一套輸入輸出規(guī)范，一來(lái)能夠支持更多的場(chǎng)景，二來(lái)可以更好的在內(nèi)部進(jìn)行封裝處理，三來(lái)使用者能夠更加快速熟悉和使用相應(yīng)的功能，能做到舉一反三。
