文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

那些关于DOM的常见Hook封装,你知道几个?

2024-12-01 19:36

关注

加深对 React hooks 的理解。

学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。

培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择。

useEventListener

优雅的使用 addEventListener。

我们先来看看 addEventListener 的定义,以下来自 MDN 文档:

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。

这里的 EventTarget 可以是一个文档上的元素 Element,Document和Window 或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

我们看 useEventListener 函数 TypeScript 定义,通过类型重载,它对 Element、Document、Window 等元素以及其事件名称和回调参数都做了定义。

function useEventListener<K extends keyof HTMLElementEventMap>(
eventName: K,
handler: (ev: HTMLElementEventMap[K]) => void,
options?: Options<HTMLElement>,
): void;
function useEventListener<K extends keyof ElementEventMap>(
eventName: K,
handler: (ev: ElementEventMap[K]) => void,
options?: Options<Element>,
): void;
function useEventListener<K extends keyof DocumentEventMap>(
eventName: K,
handler: (ev: DocumentEventMap[K]) => void,
options?: Options<Document>,
): void;
function useEventListener<K extends keyof WindowEventMap>(
eventName: K,
handler: (ev: WindowEventMap[K]) => void,
options?: Options<Window>,
): void;
function useEventListener(eventName: string, handler: noop, options: Options): void;

内部代码比较简单:

function useEventListener(
// 事件名称
eventName: string,
// 处理函数
handler: noop,
// 设置
options: Options = {},
) {
const handlerRef = useLatest(handler);

useEffectWithTarget(
() => {
const targetElement = getTargetElement(options.target, window);
if (!targetElement?.addEventListener) {
return;
}

const eventListener = (event: Event) => {
return handlerRef.current(event);
};

// 监听事件
targetElement.addEventListener(eventName, eventListener, {
// listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
capture: options.capture,
// listener 在添加之后最多只调用一次。如果是 true,listener 会在其被调用之后自动移除。
once: options.once,
// 设置为 true 时,表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告
passive: options.passive,
});

// 移除事件
return () => {
targetElement.removeEventListener(eventName, eventListener, {
capture: options.capture,
});
};
},
[eventName, options.capture, options.once, options.passive],
options.target,
);
}

useClickAway

监听目标元素外的点击事件。

提到这个的应用场景,应该是模态框,点击外部阴影部分,自动关闭的场景。那这里它是怎么实现的呢?

首先它支持传递 DOM 节点或者 Ref,并且是支持数组方式。事件默认是支持 click,开发者可以自行传递并支持数组方式。

export default function useClickAway<T extends Event = Event>(
// 触发函数
onClickAway: (event: T) => void,
// DOM 节点或者 Ref,支持数组
target: BasicTarget | BasicTarget[],
// 指定需要监听的事件,支持数组
eventName: string | string[] = 'click',
) {
}

然后内部通过 document.addEventListener 监听事件。组件卸载的时候清除事件监听。

// 事件列表
const eventNames = Array.isArray(eventName) ? eventName : [eventName];
// document.addEventListener 监听事件,通过事件代理的方式知道目标节点
eventNames.forEach((event) => document.addEventListener(event, handler));
return () => {
eventNames.forEach((event) => document.removeEventListener(event, handler));
};

最后看 handler 函数,通过 event.target 获取到触发事件的对象 (某个 DOM 元素) 的引用,判断假如不在传入的 target 列表中,则触发定义好的 onClickAway 函数。

const handler = (event: any) => {
const targets = Array.isArray(target) ? target : [target];
if (
// 判断点击的 DOM Target 是否在定义的 DOM 元素(列表)中
targets.some((item) => {
const targetElement = getTargetElement(item);
return !targetElement || targetElement.contains(event.target);
})
) {
return;
}
// 触发点击事件
onClickAwayRef.current(event);
};

小结一下,useClickAway 就是使用了事件代理的方式,通过 document 监听事件,判断触发事件的 DOM 元素是否在 target 列表中,从而决定是否要触发定义好的函数。

useEventTarget

常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装,支持自定义值转换和重置功能。

直接看代码,比较简单,其实就是监听表单的 onChange 事件,拿到值后更新 value 值,更新的逻辑支持自定义。

function useEventTarget<T, U = T>(options?: Options<T, U>) {
const { initialValue, transformer } = options || {};
const [value, setValue] = useState(initialValue);
// 自定义转换函数
const transformerRef = useLatest(transformer);
const reset = useCallback(() => setValue(initialValue), []);
const onChange = useCallback((e: EventTarget<U>) => {
// 获取 e.target.value 的值,并进行设置
const _value = e.target.value;
if (isFunction(transformerRef.current)) {
return setValue(transformerRef.current(_value));
}
// no transformer => U and T should be the same
return setValue(_value as unknown as T);
}, []);

return [
value,
{
onChange,
reset,
},
] as const;
}

useTitle

用于设置页面。

这个页面指的是浏览器 Tab 中展示的。通过 document.title 设置。

代码非常简单,一看就会:

function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {
const titleRef = useRef(isBrowser ? document.title : '');
useEffect(() => {
document.title = title;
}, [title]);

useUnmount(() => {
// 组件卸载后,恢复上一次的 title
if (options.restoreOnUnmount) {
document.title = titleRef.current;
}
});
}

useFavicon

设置页面的 favicon。

favicon 指的是页面 Tab 的这个 ICON。

原理是通过 link 标签设置 favicon。

const useFavicon = (href: string) => {
useEffect(() => {
if (!href) return;

const cutUrl = href.split('.');
const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes;

const link: HTMLLinkElement =
document.querySelector("link[rel*='icon']") || document.createElement('link');
// 用于定义链接的内容的类型。
link.type = ImgTypeMap[imgSuffix];
// 指定被链接资源的URL。
link.href = href;
// 此属性命名链接文档与当前文档的关系。
link.rel = 'shortcut icon';

document.getElementsByTagName('head')[0].appendChild(link);
}, [href]);
};

来源:前端杂货铺内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯