響應(yīng)式網(wǎng)站開(kāi)發(fā)軟件,企業(yè)簡(jiǎn)介100字以?xún)?nèi),北京百度推廣代理,怎么給網(wǎng)站做php后臺(tái)在現(xiàn)代前端應(yīng)用開(kāi)發(fā)中#xff0c;尤其是在高交互性的用戶(hù)界面中#xff0c;防抖#xff08;Debouncing#xff09;是一個(gè)至關(guān)重要的技術(shù)。它通過(guò)限制函數(shù)執(zhí)行的頻率#xff0c;避免因用戶(hù)快速、重復(fù)的操作#xff08;如輸入搜索關(guān)鍵詞、調(diào)整窗口大小、滾動(dòng)頁(yè)…在現(xiàn)代前端應(yīng)用開(kāi)發(fā)中尤其是在高交互性的用戶(hù)界面中防抖Debouncing是一個(gè)至關(guān)重要的技術(shù)。它通過(guò)限制函數(shù)執(zhí)行的頻率避免因用戶(hù)快速、重復(fù)的操作如輸入搜索關(guān)鍵詞、調(diào)整窗口大小、滾動(dòng)頁(yè)面等而導(dǎo)致的不必要的計(jì)算和渲染從而優(yōu)化性能、提升用戶(hù)體驗(yàn)。然而隨著 React 18 引入并發(fā)特性Concurrent Features特別是useTransition和startTransition等 API 的出現(xiàn)傳統(tǒng)的防抖實(shí)現(xiàn)面臨了新的挑戰(zhàn)。在并發(fā)模式下React 能夠中斷并重新開(kāi)始渲染將一些非緊急的更新標(biāo)記為“過(guò)渡”transition以保持 UI 的響應(yīng)性。這意味著一個(gè)被防抖處理的更新可能被標(biāo)記為過(guò)渡并且在過(guò)渡期間新的用戶(hù)輸入可能會(huì)到達(dá)。此時(shí)一個(gè)健壯的防抖 Hook 必須確保在過(guò)渡期間不會(huì)丟棄任何最新的更新即始終處理最后一次有效的用戶(hù)輸入無(wú)論之前的過(guò)渡是否完成。今天我們就來(lái)深入探討如何構(gòu)建一個(gè)支持“并發(fā)安全”的防抖 Hook特別關(guān)注如何在 React 的transition機(jī)制下確保“不丟棄最后的更新”。1. 防抖Debouncing基礎(chǔ)回顧在深入并發(fā)世界之前我們先快速回顧一下防抖的基本概念和實(shí)現(xiàn)。1.1 什么是防抖防抖是一種限制函數(shù)執(zhí)行頻率的技術(shù)。當(dāng)一個(gè)事件被觸發(fā)后不是立即執(zhí)行回調(diào)函數(shù)而是設(shè)置一個(gè)定時(shí)器。如果在定時(shí)器到期之前該事件再次被觸發(fā)則清除前一個(gè)定時(shí)器并重新設(shè)置。只有當(dāng)事件停止觸發(fā)并在指定時(shí)間內(nèi)沒(méi)有再次觸發(fā)時(shí)回調(diào)函數(shù)才會(huì)被執(zhí)行。核心思想延遲執(zhí)行并在延遲期間如果再次觸發(fā)則取消前一次的延遲重新開(kāi)始計(jì)時(shí)。1.2 為什么需要防抖性能優(yōu)化減少不必要的 API 請(qǐng)求、DOM 操作或復(fù)雜計(jì)算。例如用戶(hù)在搜索框中鍵入時(shí)每敲擊一個(gè)字符就發(fā)送一次請(qǐng)求是低效的。用戶(hù)體驗(yàn)避免 UI 頻繁更新導(dǎo)致的卡頓或閃爍提供更流暢的交互。1.3 傳統(tǒng) JavaScript 防抖實(shí)現(xiàn)一個(gè)基本的 JavaScript 防抖函數(shù)通常會(huì)像這樣function debounce(func, delay) { let timer null; // 用于存儲(chǔ)定時(shí)器 ID return function(...args) { const context this; // 保存函數(shù)執(zhí)行的上下文 clearTimeout(timer); // 每次調(diào)用時(shí)都清除之前的定時(shí)器 timer setTimeout(() { func.apply(context, args); // 定時(shí)器到期后執(zhí)行實(shí)際函數(shù) }, delay); }; } // 示例使用 function search(query) { console.log(Searching for:, query); } const debouncedSearch debounce(search, 500); // 模擬用戶(hù)輸入 debouncedSearch(apple); debouncedSearch(apple p); debouncedSearch(apple ph); // 只有這個(gè)會(huì)觸發(fā) search 函數(shù)在 500ms 后2. React Hooks 中的防抖初步探索將上述 JavaScript 防抖邏輯遷移到 React Hooks 中我們需要處理 React 組件的生命周期、狀態(tài)管理和副作用。useRef、useCallback和useEffect是實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵。2.1useDebouncedCallback的基本結(jié)構(gòu)我們目標(biāo)是創(chuàng)建一個(gè)useDebouncedCallbackHook它接受一個(gè)回調(diào)函數(shù)和延遲時(shí)間并返回一個(gè)防抖后的函數(shù)。import { useRef, useCallback, useEffect } from react; type Procedure (...args: any[]) void; /** * 一個(gè)基本的防抖 Hook返回一個(gè)防抖后的回調(diào)函數(shù)。 * 尚未考慮并發(fā)安全和 transition。 */ export function useDebouncedCallbackT extends Procedure( callback: T, delay: number ): T { cancel: () void; flush: () void } { const callbackRef useRef(callback); // 存儲(chǔ)最新的回調(diào)函數(shù) const timerRef useRefReturnTypetypeof setTimeout | null(null); // 存儲(chǔ)定時(shí)器 ID // 確保 callbackRef 始終指向最新的 callback 函數(shù)實(shí)例 useEffect(() { callbackRef.current callback; }, [callback]); const debounced useCallback((...args: ParametersT) { clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); // 清除舊定時(shí)器 timerRef.current setTimeout(() { callbackRef.current(...args); // 執(zhí)行最新回調(diào)函數(shù) }, delay); }, [delay]); // 依賴(lài) delay當(dāng) delay 改變時(shí)重新生成防抖函數(shù) // 取消任何正在等待的防抖執(zhí)行 const cancel useCallback(() { clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); timerRef.current null; }, []); // 立即執(zhí)行并清除定時(shí)器如果正在等待 const flush useCallback(() { if (timerRef.current) { clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); // 這里需要知道上次調(diào)用 debounced 時(shí)傳入的參數(shù)才能 flush // 這是一個(gè)現(xiàn)有設(shè)計(jì)缺陷將在后續(xù)改進(jìn) // callbackRef.current(...lastArgs); // 假設(shè)我們能獲取到 lastArgs timerRef.current null; } }, []); // 組件卸載時(shí)清除定時(shí)器防止內(nèi)存泄漏 useEffect(() { return () { clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); }; }, []); // 返回防抖函數(shù)并附加 cancel 和 flush 方法 return Object.assign(debounced, { cancel, flush }) as T { cancel: () void; flush: () void }; }上述實(shí)現(xiàn)存在的問(wèn)題flush方法無(wú)法獲取到最新的參數(shù)debounced函數(shù)被調(diào)用時(shí)參數(shù)args是局部變量flush無(wú)法直接訪問(wèn)。我們需要一個(gè)機(jī)制來(lái)存儲(chǔ)最后一次調(diào)用debounced時(shí)的參數(shù)。并發(fā)安全問(wèn)題這是本文的重點(diǎn)。當(dāng)callback內(nèi)部觸發(fā)了startTransition導(dǎo)致的非緊急更新時(shí)如果在此期間debounced被再次調(diào)用它可能會(huì)錯(cuò)誤地取消一個(gè)已在過(guò)渡中的更新或者在過(guò)渡結(jié)束后無(wú)法正確處理最新的輸入。3. React 18 并發(fā)特性與useTransition的挑戰(zhàn)React 18 引入了并發(fā)渲染這是一個(gè)強(qiáng)大的新能力它允許 React 在不阻塞主線程的情況下進(jìn)行渲染工作。useTransition是暴露這一能力的 Hook 之一。3.1useTransition是什么useTransitionHook 允許你將某些狀態(tài)更新標(biāo)記為“過(guò)渡”transitions從而將其優(yōu)先級(jí)降低。當(dāng)一個(gè)更新被標(biāo)記為過(guò)渡時(shí)React 會(huì)盡可能地在后臺(tái)處理它同時(shí)保持 UI 的響應(yīng)性。如果用戶(hù)在此期間有更緊急的操作如輸入、點(diǎn)擊React 會(huì)優(yōu)先處理這些緊急更新甚至中斷正在進(jìn)行的過(guò)渡渲染并在之后重新開(kāi)始。useTransition返回一個(gè)包含兩個(gè)元素的數(shù)組isPending: 一個(gè)布爾值表示是否有正在進(jìn)行的過(guò)渡。startTransition: 一個(gè)函數(shù)用于將回調(diào)函數(shù)中的狀態(tài)更新標(biāo)記為過(guò)渡。const [isPending, startTransition] useTransition();3.2 傳統(tǒng)防抖在并發(fā)環(huán)境下的不足假設(shè)我們的debounced回調(diào)函數(shù)內(nèi)部會(huì)觸發(fā)一個(gè)耗時(shí)的狀態(tài)更新并且我們希望將其標(biāo)記為過(guò)渡const [query, setQuery] useState(); const [debouncedQuery, setDebouncedQuery] useState(); const [isSearching, startTransition] useTransition(); const handleInputChange (e: React.ChangeEventHTMLInputElement) { const newQuery e.target.value; setQuery(newQuery); // 緊急更新立即顯示在輸入框 // 這里的 setDebouncedQuery 會(huì)被防抖處理并且我們希望它是過(guò)渡的 debouncedUpdateQuery(newQuery); }; // 假設(shè) debouncedUpdateQuery 是一個(gè)防抖函數(shù) const debouncedUpdateQuery useDebouncedCallback((newQuery: string) { startTransition(() { setDebouncedQuery(newQuery); // 非緊急更新用于觸發(fā)搜索 }); }, 500);問(wèn)題場(chǎng)景用戶(hù)快速鍵入 apple。debouncedUpdateQuery(apple)被調(diào)用設(shè)置了一個(gè) 500ms 的定時(shí)器。定時(shí)器到期debouncedUpdateQuery內(nèi)部的startTransition被調(diào)用setDebouncedQuery(apple)觸發(fā)了一個(gè)過(guò)渡更新。此時(shí)isPending變?yōu)閠rue。在isPending仍然為true即過(guò)渡仍在進(jìn)行時(shí)用戶(hù)又快速鍵入 apple pie。debouncedUpdateQuery(apple pie)再次被調(diào)用。根據(jù)我們之前的useDebouncedCallback實(shí)現(xiàn)它會(huì)clearTimeout并設(shè)置一個(gè)新的定時(shí)器。結(jié)果debouncedQuery永遠(yuǎn)不會(huì)更新為 apple因?yàn)樗母卤籧learTimeout取消了。當(dāng)新的定時(shí)器到期時(shí)它會(huì)觸發(fā)setDebouncedQuery(apple pie)但在apple的過(guò)渡更新完成后我們希望立即處理apple pie而不是再次等待 500ms。更糟糕的是如果startTransition內(nèi)部邏輯很慢導(dǎo)致isPending持續(xù)很長(zhǎng)時(shí)間用戶(hù)在這期間的輸入可能會(huì)被多次延遲或錯(cuò)誤處理。核心挑戰(zhàn)我們需要一個(gè)機(jī)制來(lái)在防抖定時(shí)器到期后如果發(fā)現(xiàn)isPending為true則不立即執(zhí)行而是等待isPending變?yōu)閒alse。在等待期間如果debounced被再次調(diào)用它應(yīng)該更新latestArgs并在isPending變?yōu)閒alse后確保執(zhí)行的是latestArgs。確保在isPending狀態(tài)轉(zhuǎn)換時(shí)能夠“捕獲”到在轉(zhuǎn)換期間發(fā)生的最后一次更新。4. 構(gòu)建并發(fā)安全的useDebouncedCallback為了解決上述挑戰(zhàn)我們需要對(duì)useDebouncedCallback進(jìn)行一番改造。我們將利用useRef來(lái)存儲(chǔ) mutable 的數(shù)據(jù)如定時(shí)器 ID、最新的參數(shù)useState來(lái)觸發(fā)useEffect的重新運(yùn)行以及useTransition來(lái)管理非緊急更新。4.1 核心思路存儲(chǔ)最新參數(shù)使用latestArgsRef始終保存debounced函數(shù)最后一次被調(diào)用時(shí)的參數(shù)。分離定時(shí)器觸發(fā)和實(shí)際執(zhí)行setTimeout僅負(fù)責(zé)在delay后發(fā)出一個(gè)“信號(hào)”而不是直接執(zhí)行回調(diào)。useEffect作為執(zhí)行器監(jiān)聽(tīng)這個(gè)“信號(hào)”以及isPending狀態(tài)。只有當(dāng)信號(hào)發(fā)出且isPending為false時(shí)才真正執(zhí)行用戶(hù)的回調(diào)。startTransition的集成在useEffect的執(zhí)行器中使用startTransition包裹用戶(hù)回調(diào)。4.2 詳細(xì)代碼實(shí)現(xiàn)import { useRef, useCallback, useEffect, useState, useTransition } from react; type Procedure (...args: any[]) void; interface DebounceOptions { /** * 是否將防抖回調(diào)的執(zhí)行包裹在 React transition 中。 * 當(dāng)設(shè)置為 true 時(shí)回調(diào)內(nèi)部的更新會(huì)被標(biāo)記為非緊急 * 并且 Hook 會(huì)確保在之前的 transition 結(jié)束時(shí)處理最新的輸入。 * 默認(rèn)為 false。 */ useTransition?: boolean; } /** * 構(gòu)建一個(gè)并發(fā)安全的防抖 Hook。 * 確保在 transition 期間不會(huì)丟棄最后的更新。 */ export function useDebouncedCallbackT extends Procedure( callback: T, delay: number, options?: DebounceOptions ): T { cancel: () void; flush: () void } { // 1. useRefs 存儲(chǔ)可變狀態(tài)不觸發(fā)組件重新渲染 const callbackRef useRef(callback); // 存儲(chǔ)最新的用戶(hù)回調(diào)函數(shù) const timerRef useRefReturnTypetypeof setTimeout | null(null); // 存儲(chǔ)定時(shí)器 ID const latestArgsRef useRefParametersT | null(null); // 存儲(chǔ)最后一次調(diào)用 debounced 函數(shù)時(shí)的參數(shù) // 2. useTransition 跟蹤過(guò)渡狀態(tài) // 這個(gè) isPending 指的是由本 Hook 內(nèi)部的 startTransition 引起的過(guò)渡狀態(tài)。 const [isTransitionPending, startTransition] useTransition(); // 3. useState 作為“信號(hào)”觸發(fā) useEffect 運(yùn)行實(shí)際的防抖邏輯 // 我們使用一個(gè)數(shù)字計(jì)數(shù)器確保每次延遲結(jié)束后都能觸發(fā) useEffect。 // 0 表示沒(méi)有待處理的防抖執(zhí)行大于 0 表示有待處理的防抖執(zhí)行。 const [runSignal, setRunSignal] useState(0); // 4. useEffect 確保 callbackRef 始終指向最新的回調(diào)函數(shù) // 這是為了避免閉包陷阱確保執(zhí)行的是最新的 callback 實(shí)例。 useEffect(() { callbackRef.current callback; }, [callback]); // 5. useEffect 作為“防抖執(zhí)行器” // 當(dāng) runSignal 改變 (表示延遲已過(guò)) 且沒(méi)有活躍的 React transition 時(shí)執(zhí)行回調(diào)。 // 如果 isTransitionPending 為 true則等待它變?yōu)?false 后再執(zhí)行。 useEffect(() { // 只有當(dāng)有信號(hào)發(fā)出 (runSignal 0) 并且有參數(shù)待處理 (latestArgsRef.current ! null) // 并且沒(méi)有活躍的 React transition 時(shí)才執(zhí)行回調(diào)。 if (runSignal 0 latestArgsRef.current ! null !isTransitionPending) { const argsToExecute latestArgsRef.current; latestArgsRef.current null; // 執(zhí)行前清除參數(shù)表示這些參數(shù)已被“消費(fèi)” const executeCallback () { callbackRef.current(...argsToExecute); }; // 根據(jù) options.useTransition 決定是否包裹在 startTransition 中 if (options?.useTransition) { startTransition(executeCallback); } else { executeCallback(); } // 重置 runSignal準(zhǔn)備迎接下一個(gè)防抖周期 setRunSignal(0); } }, [runSignal, isTransitionPending, startTransition, options?.useTransition]); // 6. useCallback 返回的防抖函數(shù) // 這是用戶(hù)會(huì)直接調(diào)用的函數(shù)它負(fù)責(zé)設(shè)置定時(shí)器并更新最新參數(shù)。 const debounced useCallback((...args: ParametersT) { latestArgsRef.current args; // 始終更新為最新參數(shù) clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); // 清除舊定時(shí)器 timerRef.current setTimeout(() { // 延遲結(jié)束后發(fā)出信號(hào) (通過(guò)更新 runSignal 狀態(tài)) 觸發(fā) useEffect 運(yùn)行 // 注意這里只是發(fā)出信號(hào)不直接執(zhí)行回調(diào)。 setRunSignal(prev prev 1); }, delay); }, [delay]); // 依賴(lài) delay當(dāng) delay 改變時(shí)重新創(chuàng)建防抖函數(shù) // 7. cancel 方法取消任何正在等待的防抖執(zhí)行 const cancel useCallback(() { clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); timerRef.current null; latestArgsRef.current null; // 清除任何待處理的參數(shù) setRunSignal(0); // 重置信號(hào) }, []); // 8. flush 方法立即執(zhí)行并清除定時(shí)器 const flush useCallback(() { // 只有當(dāng)有參數(shù)待處理且沒(méi)有活躍的 React transition 時(shí)才立即執(zhí)行。 if (latestArgsRef.current ! null !isTransitionPending) { const argsToExecute latestArgsRef.current; latestArgsRef.current null; // 清除參數(shù) clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); timerRef.current null; // 清除定時(shí)器 const executeCallback () { callbackRef.current(...argsToExecute); }; if (options?.useTransition) { startTransition(executeCallback); } else { executeCallback(); } setRunSignal(0); // 重置信號(hào) } }, [isTransitionPending, startTransition, options?.useTransition]); // 9. cleanup組件卸載時(shí)清除定時(shí)器防止內(nèi)存泄漏 useEffect(() { return () { clearTimeout(timerRef.current as ReturnTypetypeof setTimeout); }; }, []); // 返回防抖函數(shù)并附加 cancel 和 flush 方法 return Object.assign(debounced, { cancel, flush }) as T { cancel: () void; flush: () void }; }4.3 邏輯分析讓我們?cè)敿?xì)剖析這個(gè)并發(fā)安全的useDebouncedCallbackHook 的工作原理機(jī)制/變量作用如何確保并發(fā)安全/不丟棄更新callbackRefuseRef存儲(chǔ)用戶(hù)傳入的最新回調(diào)函數(shù)。避免閉包陷阱確保防抖函數(shù)始終調(diào)用的是callback的最新實(shí)例即使callback本身發(fā)生了變化。timerRefuseRef存儲(chǔ)setTimeout返回的定時(shí)器 ID。允許在debounced每次被調(diào)用時(shí)清除前一個(gè)定時(shí)器實(shí)現(xiàn)防抖核心邏輯。latestArgsRefuseRef存儲(chǔ)debounced函數(shù)最后一次被調(diào)用時(shí)傳入的參數(shù)。關(guān)鍵機(jī)制之一。無(wú)論debounced被調(diào)用多少次latestArgsRef始終保存最新的參數(shù)。當(dāng)最終執(zhí)行時(shí)它確保我們處理的是最新的用戶(hù)輸入而不是舊的或被中間取消的輸入。isTransitionPendinguseTransition返回的布爾值表示是否有正在進(jìn)行的 React transition。關(guān)鍵機(jī)制之二。useEffect執(zhí)行器會(huì)等待isTransitionPending變?yōu)閒alse。這意味著即使防抖定時(shí)器到期如果前一個(gè)防抖回調(diào)觸發(fā)的過(guò)渡仍在進(jìn)行實(shí)際執(zhí)行會(huì)被延遲直到過(guò)渡完成。startTransitionuseTransition返回的函數(shù)用于將狀態(tài)更新標(biāo)記為非緊急。當(dāng)options.useTransition為true時(shí)實(shí)際回調(diào)被startTransition包裹允許 React 優(yōu)先處理緊急更新提升用戶(hù)體驗(yàn)。runSignaluseState維護(hù)一個(gè)數(shù)字計(jì)數(shù)器作為useEffect執(zhí)行器的觸發(fā)信號(hào)。關(guān)鍵機(jī)制之三。setTimeout結(jié)束后通過(guò)setRunSignal(prev prev 1)來(lái)更新?tīng)顟B(tài)從而觸發(fā)useEffect。由于useEffect的依賴(lài)項(xiàng)中包含runSignal它保證了在delay結(jié)束后即使isTransitionPending為trueuseEffect也會(huì)被觸發(fā)并等待isTransitionPending變?yōu)閒alse。一旦isTransitionPending變?yōu)閒alseuseEffect會(huì)再次運(yùn)行并執(zhí)行l(wèi)atestArgsRef中的回調(diào)。debounced返回給用戶(hù)的防抖函數(shù)。每次調(diào)用都清除舊定時(shí)器并設(shè)置新定時(shí)器。同時(shí)更新latestArgsRef。它的職責(zé)是“調(diào)度”而不是“執(zhí)行”。cancel取消任何待定的防抖執(zhí)行。清除定時(shí)器、latestArgsRef和runSignal確保不再有任何后續(xù)執(zhí)行。flush立即執(zhí)行待定的防抖回調(diào)。允許強(qiáng)制執(zhí)行。它會(huì)檢查latestArgsRef和isTransitionPending如果條件允許立即執(zhí)行并清除所有待定狀態(tài)。組件卸載 cleanupuseEffect返回的清理函數(shù)清除定時(shí)器。防止組件卸載后定時(shí)器依然存在導(dǎo)致內(nèi)存泄漏或不必要的錯(cuò)誤?？偨Y(jié)通過(guò)將“調(diào)度”和“執(zhí)行”分離并引入runSignal和isTransitionPending作為執(zhí)行的“守衛(wèi)條件”我們確保了始終處理最新參數(shù)latestArgsRef確保了這一點(diǎn)。不干擾正在進(jìn)行的過(guò)渡useEffect只有在!isTransitionPending時(shí)才執(zhí)行回調(diào)從而避免中斷或與正在進(jìn)行的過(guò)渡沖突。過(guò)渡結(jié)束后立即處理最新參數(shù)useEffect依賴(lài)于isTransitionPending。當(dāng)isTransitionPending從true變?yōu)閒alse時(shí)即使runSignal沒(méi)有變化useEffect也會(huì)重新運(yùn)行此時(shí)如果runSignal 0且latestArgsRef有值它就會(huì)立即執(zhí)行從而“捕獲”在過(guò)渡期間發(fā)生的最新的更新。5. 基于useDebouncedCallback構(gòu)建useDebouncedValue在許多情況下我們需要的不是防抖一個(gè)回調(diào)函數(shù)而是防抖一個(gè)狀態(tài)值。例如用戶(hù)在輸入框中鍵入我們希望搜索功能在用戶(hù)停止輸入一段時(shí)間后才觸發(fā)。此時(shí)useDebouncedValue會(huì)更方便。我們可以基于前面實(shí)現(xiàn)的useDebouncedCallback來(lái)構(gòu)建useDebouncedValue。import { useState, useEffect, useCallback } from react; import { useDebouncedCallback } from ./useDebouncedCallback; // 假設(shè) useDebouncedCallback 在同一目錄或可導(dǎo)入 interface DebouncedValueOptions { /** * 是否將防抖值的更新包裹在 React transition 中。 * 當(dāng)設(shè)置為 true 時(shí)值的更新會(huì)被標(biāo)記為非緊急 * 并且 Hook 會(huì)確保在之前的 transition 結(jié)束時(shí)處理最新的輸入。 * 默認(rèn)為 false。 */ useTransition?: boolean; } /** * 一個(gè)并發(fā)安全的防抖 Hook用于防抖一個(gè)值。 * 確保在 transition 期間不會(huì)丟棄最后的更新。 * * param value 待防抖的原始值 * param delay 防抖延遲時(shí)間毫秒 * param options 配置選項(xiàng)例如是否使用 useTransition * returns [防抖后的值, 是否正在防抖 (包括 transition 階段)] */ export function useDebouncedValueT( value: T, delay: number, options?: DebouncedValueOptions ): [T, boolean] { // 存儲(chǔ)最終輸出的防抖值 const [debouncedValue, setDebouncedValue] useState(value); // 跟蹤防抖過(guò)程是否活躍包括計(jì)時(shí)器等待和 transition 階段 const [isDebouncing, setIsDebouncing] useState(false); // 使用 useDebouncedCallback 來(lái)處理值的防抖邏輯 // 這里的回調(diào)函數(shù)負(fù)責(zé)更新 debouncedValue 和 isDebouncing 狀態(tài) const debouncedSetState useDebouncedCallback( useCallback((newValue: T) { setDebouncedValue(newValue); // 實(shí)際更新防抖值 setIsDebouncing(false); // 防抖周期結(jié)束 }, []), // 回調(diào)函數(shù)本身不依賴(lài)任何外部狀態(tài)因此是穩(wěn)定的 delay, options ); // 當(dāng)原始值 value 發(fā)生變化時(shí)觸發(fā)防抖邏輯 useEffect(() { // 只有當(dāng)傳入的 value 與當(dāng)前 debouncedValue 不同時(shí)才觸發(fā)防抖 // 這可以避免不必要的防抖周期例如父組件重新渲染但 value 未變。 if (value ! debouncedValue) { setIsDebouncing(true); // 標(biāo)記為正在防抖 debouncedSetState(value); // 調(diào)用防抖后的設(shè)置函數(shù)傳入最新值 } // 清理函數(shù)組件卸載時(shí)或 debouncedSetState 改變時(shí)取消任何待定的防抖 return () { debouncedSetState.cancel(); setIsDebouncing(false); // 確保狀態(tài)正確 }; }, [value, debouncedValue, debouncedSetState]); // 返回防抖后的值以及當(dāng)前是否處于防抖狀態(tài) return [debouncedValue, isDebouncing]; }5.1useDebouncedValue邏輯分析debouncedValue和isDebouncing狀態(tài)debouncedValue存儲(chǔ)經(jīng)過(guò)防抖處理后的最終值是 Hook 的主要輸出。isDebouncing是一個(gè)布爾值用于表示當(dāng)前是否有一個(gè)防抖周期正在進(jìn)行中從value變化到debouncedValue更新完成。這包括setTimeout的等待時(shí)間以及useTransition可能帶來(lái)的過(guò)渡時(shí)間。debouncedSetState這是useDebouncedCallback的一個(gè)實(shí)例它包裹了一個(gè)簡(jiǎn)單的回調(diào)函數(shù)(newValue) { setDebouncedValue(newValue); setIsDebouncing(false); }。這個(gè)回調(diào)函數(shù)在防抖延遲結(jié)束后負(fù)責(zé)將newValue更新到debouncedValue并解除isDebouncing狀態(tài)。options會(huì)直接傳遞給useDebouncedCallback因此如果useTransition啟用setDebouncedValue的更新也會(huì)被標(biāo)記為過(guò)渡。useEffect監(jiān)聽(tīng)value變化當(dāng)傳入的value發(fā)生變化時(shí)且與debouncedValue不同它會(huì)執(zhí)行以下操作setIsDebouncing(true)立即將isDebouncing設(shè)為true向 UI 反饋正在處理中。debouncedSetState(value)調(diào)用防抖后的函數(shù)將最新的value傳遞給它。useDebouncedCallback會(huì)負(fù)責(zé)防抖計(jì)時(shí)和并發(fā)安全。useEffect的清理函數(shù)會(huì)在組件卸載時(shí)或依賴(lài)項(xiàng)改變時(shí)調(diào)用debouncedSetState.cancel()確保及時(shí)取消任何未完成的防抖操作。通過(guò)這種方式useDebouncedValue巧妙地利用了useDebouncedCallback提供的并發(fā)安全和不丟棄最新更新的能力使得我們?cè)谔幚矸蓝吨禃r(shí)也能享受到同樣級(jí)別的健壯性。6. 使用示例現(xiàn)在我們有了這兩個(gè)強(qiáng)大的 Hook來(lái)看看它們?nèi)绾卧趯?shí)際應(yīng)用中發(fā)揮作用。6.1useDebouncedCallback示例搜索輸入框的 API 請(qǐng)求假設(shè)有一個(gè)搜索框用戶(hù)輸入時(shí)需要調(diào)用 API。我們希望在用戶(hù)停止輸入 500ms 后才發(fā)送請(qǐng)求并且這些請(qǐng)求是低優(yōu)先級(jí)的使用useTransition。import React, { useState } from react; import { useDebouncedCallback } from ./useDebouncedCallback; // 導(dǎo)入我們實(shí)現(xiàn)的 Hook function SearchBarWithCallback() { const [searchTerm, setSearchTerm] useState(); const [results, setResults] useStatestring[]([]); const [isLoading, setIsLoading] useState(false); // 定義一個(gè)模擬的 API 調(diào)用函數(shù) const fetchSearchResults useCallback(async (query: string) { if (!query.trim()) { setResults([]); setIsLoading(false); return; } setIsLoading(true); console.log([API CALL] Searching for: ${query}...); // 模擬網(wǎng)絡(luò)延遲和計(jì)算 await new Promise(resolve setTimeout(resolve, Math.random() * 1000 300)); setResults([Result for ${query} - 1, Result for ${query} - 2]); setIsLoading(false); }, []); // 使用并發(fā)安全的防抖 Hook 包裹 API 調(diào)用 const debouncedFetch useDebouncedCallback(fetchSearchResults, 500, { useTransition: true }); const handleInputChange (event: React.ChangeEventHTMLInputElement) { const newSearchTerm event.target.value; setSearchTerm(newSearchTerm); // 每次輸入都調(diào)用防抖函數(shù) debouncedFetch(newSearchTerm); }; return ( div style{{ padding: 20px, border: 1px solid #ccc, borderRadius: 8px }} h3使用 useDebouncedCallback 進(jìn)行并發(fā)安全搜索/h3 p在輸入時(shí)UI 保持響應(yīng)。搜索請(qǐng)求在輸入停止 500ms 后發(fā)出并且是低優(yōu)先級(jí)的。/p input typetext placeholder輸入關(guān)鍵詞... value{searchTerm} onChange{handleInputChange} style{{ width: 300px, padding: 8px, fontSize: 16px }} / {isLoading p style{{ color: blue }}正在搜索.../p} div style{{ marginTop: 15px }} h4搜索結(jié)果/h4 {results.length 0 !isLoading searchTerm.trim() p無(wú)結(jié)果。/p} ul {results.map((result, index) ( li key{index}{result}/li ))} /ul /div button onClick{debouncedFetch.cancel} style{{ marginTop: 10px, marginRight: 10px }}取消當(dāng)前搜索/button button onClick{debouncedFetch.flush}立即搜索/button /div ); } export default SearchBarWithCallback;在這個(gè)例子中searchTerm會(huì)立即更新確保輸入框的響應(yīng)性。而實(shí)際的fetchSearchResults調(diào)用則被debouncedFetch防抖并且因?yàn)閡seTransition: true即使 API 調(diào)用很慢用戶(hù)也可以繼續(xù)輸入U(xiǎn)I 不會(huì)卡頓。如果在搜索請(qǐng)求正在進(jìn)行isLoading為true且isTransitionPending可能為true時(shí)用戶(hù)又輸入了新內(nèi)容useDebouncedCallback會(huì)確保最終處理的是最新的搜索詞。6.2useDebouncedValue示例實(shí)時(shí)預(yù)覽的文本編輯器假設(shè)有一個(gè)文本編輯器用戶(hù)輸入內(nèi)容我們希望在一個(gè)單獨(dú)的預(yù)覽區(qū)域顯示其格式化后的版本但這個(gè)格式化過(guò)程比較耗時(shí)我們希望它是防抖的。import React, { useState } from react; import { useDebouncedValue } from ./useDebouncedValue; // 導(dǎo)入我們實(shí)現(xiàn)的 Hook function TextEditorWithPreview() { const [editorContent, setEditorContent] useState(); const [debouncedPreviewContent, isPreviewPending] useDebouncedValue( editorContent, 700, // 700ms 延遲 { useTransition: true } // 使用 transition ); // 模擬一個(gè)耗時(shí)的文本格式化函數(shù) const formatContent useCallback((text: string) { console.log([FORMATTER] Formatting content...); // 模擬復(fù)雜計(jì)算 let formattedText text.toUpperCase(); // 簡(jiǎn)單示例 for (let i 0; i 10000000; i) { /* simulate heavy computation */ } return formattedText; }, []); const formattedPreview formatContent(debouncedPreviewContent); const handleEditorChange (event: React.ChangeEventHTMLTextAreaElement) { setEditorContent(event.target.value); }; return ( div style{{ padding: 20px, display: flex, gap: 20px, border: 1px solid #ccc, borderRadius: 8px }} div style{{ flex: 1 }} h3使用 useDebouncedValue 進(jìn)行并發(fā)安全預(yù)覽/h3 p輸入文本右側(cè)預(yù)覽區(qū)域會(huì)在停止輸入 700ms 后更新且更新過(guò)程不阻塞 UI。/p textarea value{editorContent} onChange{handleEditorChange} placeholder在此輸入文本... rows{10} style{{ width: 100%, padding: 8px, fontSize: 16px }} / /div div style{{ flex: 1, borderLeft: 1px solid #eee, paddingLeft: 20px }} h4實(shí)時(shí)預(yù)覽/h4 {isPreviewPending p style{{ color: blue }}正在生成預(yù)覽.../p} div style{{ border: 1px dashed #aaa, padding: 10px, minHeight: 150px, backgroundColor: isPreviewPending ? #f0f8ff : white }} {formattedPreview} /div /div /div ); } export default TextEditorWithPreview;在這個(gè)例子中editorContent同樣是立即更新保持textarea的響應(yīng)。debouncedPreviewContent只有在用戶(hù)停止輸入 700ms 后才會(huì)更新。由于useTransition: true即使formatContent函數(shù)執(zhí)行很慢isPreviewPending會(huì)變?yōu)閠rue但用戶(hù)仍然可以流暢地在textarea中輸入U(xiǎn)I 不會(huì)卡死。當(dāng)用戶(hù)停止輸入useDebouncedValue會(huì)確保最終顯示的是他們輸入的最新內(nèi)容的格式化版本。7. 關(guān)鍵考量與最佳實(shí)踐在構(gòu)建和使用并發(fā)安全的防抖 Hook 時(shí)有幾個(gè)重要的考量和最佳實(shí)踐useRefvsuseState用于可變數(shù)據(jù)useRef用于存儲(chǔ)在組件整個(gè)生命周期中需要保持不變但又不需要觸發(fā)重新渲染的數(shù)據(jù)如定時(shí)器 ID、最新的函數(shù)引用、最新的參數(shù)。它的更新不會(huì)觸發(fā)組件重新渲染是高性能的關(guān)鍵。useState用于存儲(chǔ)需要觸發(fā)組件重新渲染以反映 UI 變化的數(shù)據(jù)如runSignal、debouncedValue、isPending。在我們的實(shí)現(xiàn)中callbackRef、timerRef、latestArgsRef都使用了useRef而runSignal和isDebouncing則使用了useState這是符合最佳實(shí)踐的。useCallback的穩(wěn)定性u(píng)seCallback用于記憶化函數(shù)避免在每次渲染時(shí)都創(chuàng)建新的函數(shù)實(shí)例。這對(duì)于作為useEffect依賴(lài)項(xiàng)的函數(shù)或傳遞給子組件的函數(shù)尤其重要。在我們的 Hook 中debounced、cancel、flush都被useCallback包裹確保它們?cè)赿elay改變之前保持穩(wěn)定。這也有助于優(yōu)化子組件的渲染。依賴(lài)項(xiàng)的正確性u(píng)seEffect和useCallback的依賴(lài)項(xiàng)數(shù)組必須正確填寫(xiě)以避免閉包陷阱或不必要的重新創(chuàng)建/執(zhí)行。useEffect的執(zhí)行器依賴(lài)runSignal和isTransitionPending確保在正確時(shí)機(jī)執(zhí)行。debounced函數(shù)依賴(lài)delay。delay的選擇delay的值需要根據(jù)具體的用戶(hù)體驗(yàn)需求來(lái)確定。太短可能導(dǎo)致頻繁執(zhí)行失去防抖意義太長(zhǎng)可能導(dǎo)致用戶(hù)感知延遲。對(duì)于搜索框通常 300-500ms 是一個(gè)合理的范圍。useTransition的適用場(chǎng)景useTransition適用于那些“非緊急”且可能耗時(shí)的狀態(tài)更新。如果更新是緊急的如輸入框的實(shí)時(shí)顯示則不應(yīng)使用useTransition。在我們的 Hook 中通過(guò)options.useTransition參數(shù)提供了靈活的控制能力。cancel和flush的重要性cancel允許我們?cè)谔囟ㄇ闆r下如用戶(hù)導(dǎo)航離開(kāi)頁(yè)面、表單提交前提前終止防抖操作避免不必要的副作用。flush允許我們強(qiáng)制立即執(zhí)行待定的防抖操作例如在表單提交時(shí)確保所有輸入都已處理。狀態(tài)反饋isPending(來(lái)自u(píng)seTransition) 或isDebouncing(來(lái)自u(píng)seDebouncedValue) 提供了重要的狀態(tài)反饋。在 UI 中使用這些狀態(tài)來(lái)顯示加載指示器、禁用按鈕或改變樣式可以顯著提升用戶(hù)體驗(yàn)告知用戶(hù)系統(tǒng)正在工作。8. 總結(jié)與展望我們已經(jīng)詳細(xì)探討了如何在 React 18 的并發(fā)模式下構(gòu)建一個(gè)并發(fā)安全的防抖 Hook。通過(guò)巧妙地結(jié)合useRef、useCallback、useEffect和useTransition我們成功地創(chuàng)建了一個(gè)能夠有效防抖回調(diào)函數(shù)或值。在延遲期間始終捕獲并處理最后一次更新不丟棄任何用戶(hù)輸入。在 Reacttransition期間等待過(guò)渡完成后再執(zhí)行回調(diào)避免阻塞 UI同時(shí)確保最終處理的是最新的數(shù)據(jù)。這種實(shí)現(xiàn)方式是現(xiàn)代 React 應(yīng)用中處理高頻事件和優(yōu)化性能的強(qiáng)大工具。它不僅解決了傳統(tǒng)防抖在并發(fā)環(huán)境下的不足還通過(guò)與 React 18 新特性的深度融合提供了更流暢、更響應(yīng)的用戶(hù)體驗(yàn)。掌握這種模式將使您在構(gòu)建復(fù)雜、高性能的 React 應(yīng)用時(shí)更加游刃有余。