前端【免費下載鏈接】hooksA high-quality reliable React Hooks library. https://alibaba.github.io/hooks/項目地址https://gitcode.com/gh_mirrors/hooks/hooks點擊查看免費下載導讀useEventListener是 ahooks當前倉庫位于 packages/hooks/src/useEventListener中用于在 React 函數組件里「優(yōu)雅使用 addEventListener」的核心 Hook。它把事件監(jiān)聽的注冊、清理、依賴更新、target解析等繁瑣工作全部封裝起來讓開發(fā)者可以用聲明式的方式監(jiān)聽window、Document、任意 DOM 元素乃至多個事件并在組件卸載時自動移除監(jiān)聽、避免內存泄漏。讀完本文你將掌握useEventListener的三種典型用法基礎綁定、監(jiān)聽鍵盤事件、同時監(jiān)聽多個事件、全部參數與默認值以及它背后的useLatestuseEffectWithTarget源碼實現原理與測試驗證方式。為什么需要 useEventListener在 React 函數組件中直接使用原生addEventListener需要開發(fā)者自己處理三件麻煩事清理時機組件卸載時忘記removeEventListener會造成事件監(jiān)聽泄漏或對已卸載的 DOM 節(jié)點觸發(fā)回調報錯依賴更新事件處理函數中捕獲的閉包變量過期后需要反復解綁再重新綁定代碼冗長且容易出錯目標元素解析window、document、普通 DOM 節(jié)點、ref、返回 DOM 的函數等不同目標形態(tài)需要統一解析邏輯。useEventListener通過一個 Hook 就解決了上述所有問題其整體 API 聲明如下見 index.zh-CN.mduseEventListener( eventName: string, handler: (ev: Event) void, options?: Options, );eventName為事件名稱handler為事件處理函數options為可選配置。值得注意的是在源碼實現中它還通過 TypeScript 函數重載對HTMLElementEventMap、ElementEventMap、DocumentEventMap、WindowEventMap提供了事件名與事件對象類型的完整推導讓ev參數具備精準的類型提示。三種典型用法基礎用法監(jiān)聽 DOM 節(jié)點點擊第一個官方示例見 demo/demo1.tsx展示了如何監(jiān)聽某個按鈕的點擊事件import { useState, useRef } from react; import { useEventListener } from ahooks; export default () { const [value, setValue] useState(0); const ref useRef(null); useEventListener( click, () { setValue(value 1); }, { target: ref }, ); return ( button ref{ref} typebutton You click {value} times /button ); };要點說明通過{ target: ref }把監(jiān)聽目標指向按鈕對應的 ref點擊按鈕時value自增不需要手動清理組件卸載或 target 變化時Hook 會自動完成解綁如果你不傳target默認監(jiān)聽目標就是window見下文 Options 表格。監(jiān)聽 keydown 事件默認監(jiān)聽 window第二個示例見 demo/demo2.tsx演示了不指定target、直接監(jiān)聽全局鍵盤事件import { useState } from react; import { useEventListener } from ahooks; export default () { const [value, setValue] useState(); useEventListener(keydown, (ev) { setValue(ev.code); }); return pYour press key is {value}/p; };由于未傳target監(jiān)聽器默認掛在window上按下任意按鍵即可在頁面中看到對應的ev.code如KeyA、Enter等。這在實現快捷鍵、全局按鍵統計等場景非常實用。同時監(jiān)聽多個事件第三個示例見 demo/demo3.tsx展示了eventName支持字符串數組一次調用即可監(jiān)聽多個事件import { useRef, useState } from react; import { useEventListener } from ahooks; export default () { const ref useRef(null); const [value, setValue] useState(); useEventListener( [mouseenter, mouseleave], (ev) { setValue(ev.type); }, { target: ref }, ); return ( button ref{ref} typebutton You Option is {value} /button ); };鼠標移入按鈕時ev.type為mouseenter移出時為mouseleave。從源碼實現可以看到內部會把字符串事件名統一轉成數組再逐個調用addEventListener因此單事件與多事件共用同一套注冊/清理邏輯。參數詳解Params參數說明類型默認值eventName事件名稱string|string[]-handler處理函數(ev: Event) void-options設置Options-Options參數說明類型默認值targetDOM 節(jié)點或者 ref(() Element)|Element|React.MutableRefObjectElement|Window|Documentwindowcapture可選listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發(fā)booleanfalseonce可選listener 在添加之后最多只調用一次為true時會在被調用后自動移除booleanfalsepassive可選為true時表示 listener 永遠不會調用preventDefault()若仍調用客戶端會忽略該調用并拋出控制臺警告booleanfalseenable可選是否開啟監(jiān)聽booleantrue這些選項在源碼的類型定義中與文檔完全一致且在注冊監(jiān)聽時被原樣透傳給原生addEventListener的options參數見 index.ts。因此capture、once、passive的行為完全對齊瀏覽器原生 EventTarget.addEventListener 的對應選項語義enable是 ahooks 額外提供的開關當它為false時Hook 不會注冊任何監(jiān)聽當它從false重新變?yōu)閠rue時會自動重新綁定源碼見 index.ts。這對于「用戶登錄后才開始監(jiān)聽」「組件掛載但功能尚未就緒」這類條件式監(jiān)聽場景非常有用。target 的四種合法形態(tài)從 domTarget.ts 可以看到BasicTarget的定義target支持四種寫法寫法說明示例直接傳 DOM 元素適用于元素已經存在的情況{ target: document.querySelector(#btn) }傳 React ref最常見寫法與useRef搭配{ target: ref }傳函數返回 DOM惰性解析適合元素可能延遲出現的場景{ target: () container }不傳默認監(jiān)聽windowuseEventListener(keydown, handler)在測試用例中可以看到{ target: () container }這種函數式寫法的實際應用。源碼原理四個關鍵設計useEventListener的實現并不復雜但包含四個非常值得借鑒的設計完整代碼見 index.ts。1. useLatest 保證 handler 永遠最新const handlerRef useLatest(handler);handler每次渲染都可能是一個新函數。如果直接把它綁定到addEventListener那么閉包捕獲的就是舊值。ahooks 用 useLatest 把 handler 存進 ref保證每次觸發(fā)事件時執(zhí)行的始終是「最近一次渲染」的 handler從而既不需要因為 handler 變化而反復解綁、重綁也不會讀到過期閉包。這是useEventListener性能與正確性的關鍵。2. useEffectWithTarget隨 target 變化的副作用useEffectWithTarget( () { /* 注冊與清理邏輯 */ }, [eventName, options.capture, options.once, options.passive, enable], options.target, );這里沒有直接使用useEffect而是用了 ahooks 內部封裝的 useEffectWithTarget。它的作用是當 target 對應的實際 DOM 元素發(fā)生變化時也能觸發(fā)副作用重建。從底層實現 createEffectWithTarget.ts 可以看到其核心邏輯首次渲染時直接執(zhí)行 effect之后每次渲染都比較「上一輪的 target 解析結果」與「當前 target 解析結果」以及依賴數組是否變化只有真正變化時才先執(zhí)行上一次的清理函數、再執(zhí)行新的 effect組件卸載時通過useUnmount自動執(zhí)行最后一次的清理函數見 createEffectWithTarget.ts。這意味著當ref從空變?yōu)橹赶蛘鎸?DOM 節(jié)點例如條件渲染的元素、或 DOM 節(jié)點被替換時監(jiān)聽器都能正確地「先解綁、再重綁」。這個機制也解釋了為何 Hook 能做到「無需手動清理」。3. getTargetElement統一的 target 解析const targetElement getTargetElement(options.target, window); if (!targetElement?.addEventListener) { return; }getTargetElement 會依次處理三種 target 形態(tài)若target是函數則調用它拿到元素若target含有current屬性即 ref 對象則取target.current否則把target本身當作元素。同時它還做了兩類重要保護SSR 安全非瀏覽器環(huán)境!isBrowser直接返回undefined不會在服務端渲染時報錯容錯解析結果若沒有addEventListener方法例如元素尚未掛載直接return跳過注冊不會拋異常。4. 注冊與清理的對稱實現const eventNameArray Array.isArray(eventName) ? eventName : [eventName]; eventNameArray.forEach((event) { targetElement.addEventListener(event, eventListener, { capture: options.capture, once: options.once, passive: options.passive, }); }); return () { eventNameArray.forEach((event) { targetElement.removeEventListener(event, eventListener, { capture: options.capture, }); }); };注意兩個細節(jié)注冊與清理共用同一個eventListener包裝函數內部調用handlerRef.current保證removeEventListener能精確移除同一個監(jiān)聽器引用清理時只需傳capture因為removeEventListener的匹配只依賴capture無需once/passive。整個 effect 返回的清理函數會在依賴變化或組件卸載時自動執(zhí)行與原生 API 保持完全對稱。測試驗證監(jiān)聽生命周期如何被保障倉庫為useEventListener提供了完整的單元測試見tests/index.spec.ts覆蓋了以下幾個關鍵行為可作為使用時的行為契約只監(jiān)聽 target 上的事件測試中點擊document.body時計數不變點擊 container 才觸發(fā)驗證監(jiān)聽器確實綁定在目標元素上index.spec.ts卸載后自動移除unmount()之后再點擊計數不再增加驗證組件卸載時監(jiān)聽器被正確清理不會泄漏index.spec.ts多事件監(jiān)聽click與keydown同時注冊、同時清理index.spec.tsenable 開關enable為false后即使重新渲染、點擊也不再觸發(fā)驗證條件監(jiān)聽生效index.spec.tsref 作為 target 顯式事件泛型useEventListenerscroll(scroll, onScroll, { target })這類帶事件泛型的調用方式在類型層面受到保護index.spec.ts。使用建議與注意事項優(yōu)先傳 target 而不是全局監(jiān)聽能用 ref 指向具體元素就盡量指向元素避免在window上掛過多監(jiān)聽器監(jiān)聽多個事件時用數組一次聲明代碼更簡潔handler 無需用 useCallback 包裹得益于useLatest機制handler 每次渲染重建也不會導致重復綁定/解綁這也是該 Hook 相比手寫useEffect加useCallback方案的顯著優(yōu)勢動態(tài)開關用 enable需要按條件啟用/停用監(jiān)聽時直接切換enable即可不要用「傳空數組事件名」這類 HackSSR 場景安全在服務端渲染環(huán)境下 Hook 內部會安全跳過注冊不會因為window不存在而崩潰依賴 target 元素的掛載時機如果目標元素是條件渲染的ref 可能在初次渲染時為空此時監(jiān)聽器會跳過待元素掛載、ref 更新后useEffectWithTarget會檢測到 target 變化并自動完成綁定無需額外處理。結語useEventListener用約 90 行源碼index.ts把原生addEventListener的注冊、清理、target 解析、條件開關與類型推導全部抽象成了聲明式的 Hook 調用。理解它背后useLatest與useEffectWithTarget的組合不僅能幫你用好這個 API也能讓你在面對「ref 變化時需要重建副作用」這類常見問題時直接復用同樣的設計思路。相關示例與測試均在倉庫packages/hooks/src/useEventListener目錄下可進一步閱讀完整源碼加深理解。贊分享前端【免費下載鏈接】hooksA high-quality reliable React Hooks library. https://alibaba.github.io/hooks/項目地址https://gitcode.com/gh_mirrors/hooks/hooks點擊查看免費下載相關推薦MonST3R項目如何實現動態(tài)場景的實時三維重建MonST3R項目如何實現動態(tài)場景的實時三維重建 在動態(tài)場景三維重建領域傳統方法常面臨運動物體干擾、相機位姿估計不準確等挑戰(zhàn)。MonST3R通過創(chuàng)新的前饋式架前端告別繁瑣復制用React Hooks封裝clipboard.js的優(yōu)雅實踐告別繁瑣復制用React Hooks封裝clipboard.js的優(yōu)雅實踐 你是否還在為實現復制功能編寫冗長的原生JavaScript代碼是否遇到過兼容性問前端深度探索Android Studio中文語言包插件的3個高效配置策略深度探索Android Studio中文語言包插件的3個高效配置策略 Android Studio中文語言包插件為開發(fā)者提供了完整的IDE中文界面支持讓中國開前端上一篇PKHeX.Mobile權限與安全指南正確處理Android/iOS存儲和相機權限下一篇RR項目為RS4017xs設備構建定制化系統鏡像的技術實踐創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考