如何将ahooks的DOM处理方法改写为长尾？

本文共计1275个文字，预计阅读时间需要6分钟。

目录前言DOM类Hooks使用规范getTargetElementuseEffectWithTarget思考与总结前言目标主要内容：+ 深入理解 React Hooks+ 学习如何抽象自定义 Hooks+ 构建属于自己的 React Hooks 工具

目录

• 前言
• DOM 类 Hooks 使用规范
• getTargetElement
• useEffectWithTarget
• 思考与总结

前言

目标主要有以下几点：

• 加深对 React hooks 的理解。
• 学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。
• 培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用规范，以及源码中是如何去做处理的。

DOM 类 Hooks 使用规范

这一章节，大部分参考官方文档的DOM 类 Hooks 使用规范。

第一点，ahooks 大部分 DOM 类 Hooks 都会接收 target 参数，表示要处理的元素。

target 支持三种类型 React.MutableRefObject（通过 useRef 保存的 DOM）、HTMLElement、() => HTMLElement（一般运用于 SSR 场景）。

第二点，DOM 类 Hooks 的 target 是支持动态变化的。