身為 React 開發人員,我們經常面臨需要透過 API 同步多個快速狀態變更的場景。對每一個微小的變化進行 API 呼叫可能效率低下,並且會給客戶端和伺服器帶來負擔。這就是去抖和巧妙的狀態管理發揮作用的地方。在本文中,我們將建立一個自訂 React 鉤子,透過合併有效負載和消除 API 呼叫來擷取平行 API 更新呼叫。
問題
想像一個輸入字段,使用者可以在其中調整設定或首選項。每次擊鍵或調整都可以觸發 API 呼叫來儲存新狀態。如果使用者快速連續進行多項更改,這可能會導致大量 API 請求:
- 網路資源利用效率低。
- 潛在的競爭條件。
- 伺服器上不必要的負載。
輸入去發抖
去抖動是一種用來限制函數觸發速率的技術。您不是立即呼叫函數,而是等待一段時間不活動後再執行函數。如果在延遲結束之前有另一個電話打入,計時器將重置。
為什麼要使用去抖動?
- 效能改善:減少不必要的 API 呼叫次數。
- 資源最佳化:最小化伺服器負載與網路使用。
- 增強的使用者體驗:防止快速連續呼叫造成的延遲和潛在錯誤。
useRef 的作用
在 React 中,useRef 是一個鉤子,可讓您在渲染之間保留可變值而不觸發重新渲染。它本質上是一個保存可變值的容器。
為什麼在這裡使用 useRef ?
- 保留累積更新:我們需要追蹤渲染之間的累積更新,而不會導致重新渲染。
- 存取可變當前值:useRef 為我們提供了一個可以讀寫的 .current 屬性。
useDebouncedUpdate 掛鉤
讓我們深入研究程式碼並了解它們是如何組合在一起的。
import { debounce } from "@mui/material"; import { useCallback, useEffect, useRef } from "react"; type DebouncedUpdateParams = { id: string; params: Record<string any>; }; function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void, delay: number = 300, ) { const accumulatedUpdates = useRef<debouncedupdateparams null>(null); const processUpdates = useRef( debounce(() => { if (accumulatedUpdates.current) { apiUpdate(accumulatedUpdates.current); accumulatedUpdates.current = null; } }, delay), ).current; const handleUpdate = useCallback( (params: DebouncedUpdateParams) => { accumulatedUpdates.current = { id: params.id, params: { ...(accumulatedUpdates.current?.params || {}), ...params.params, }, }; processUpdates(); }, [processUpdates], ); useEffect(() => { return () => { processUpdates.clear(); }; }, [processUpdates]); return handleUpdate; } export default useDebouncedUpdate; </debouncedupdateparams></string>
分解它
1. 使用 useRef 累積更新
我們初始化一個名為cumulativeUpdates的useRef來儲存所有傳入更新的組合參數。
const累積更新 = useRef
2. 消除 API 呼叫的抖動
我們使用 Material UI 中的 debounce 實用程式建立一個去抖函數 processUpdates。
const processUpdates = useRef( debounce(() => { if (accumulatedUpdates.current) { apiUpdate(accumulatedUpdates.current); accumulatedUpdates.current = null; } }, delay), ).current;
- 為什麼將 useRef 用於 processUpdates? 我們使用 useRef 來確保不會在每次渲染時重新建立去抖函數,這會重置去抖計時器。
3. 使用 useCallback 處理更新
handleUpdate函數負責累積更新並觸發去抖API呼叫。
const handleUpdate = useCallback( (params: DebouncedUpdateParams) => { accumulatedUpdates.current = { id: params.id, params: { ...(accumulatedUpdates.current?.params || {}), ...params.params, }, }; processUpdates(); }, [processUpdates], );
- 合併參數:我們將新參數與任何現有參數合併,以確保捕獲所有更新。
- 觸發去抖:每次呼叫handleUpdate時,我們都會觸發processUpdates(),但實際的API呼叫是去抖動的。
4. 使用 useEffect 進行清理
我們在元件卸載時清除 debounced 函數以防止記憶體洩漏。
useEffect(() => { return () => { processUpdates.clear(); }; }, [processUpdates]);
它是如何運作的
- 累積參數:每次更新都會將其參數新增至cumulativeUpdates.current,並與任何現有參數合併。
- 反跳執行:processUpdates 在執行之前等待不活動的延遲毫秒。
- API 呼叫:一旦去抖時間過去,就會使用合併的參數呼叫 apiUpdate。
- 重置累積更新:API 呼叫後,我們將cumulativeUpdates.current 重設為 null。
使用範例
以下是在組件中使用此鉤子的方法:
import React from "react"; import useDebouncedUpdate from "./useDebouncedUpdate"; function SettingsComponent() { const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500); const handleChange = (settingName, value) => { debouncedUpdate({ id: "user-settings", params: { [settingName]: value }, }); }; return ( <div> <input type="text" onchange="{(e)"> handleChange("username", e.target.value)} /> <input type="checkbox" onchange="{(e)"> handleChange("notifications", e.target.checked)} /> </div> ); } function updateSettingsApi({ id, params }) { // Make your API call here console.log("Updating settings:", params); }
- 使用者操作:當使用者鍵入或切換設定時,將呼叫handleChange。
- 去抖動更新:在 500 毫秒不活動後累積變更並將其傳送至 API。
結論
透過將去抖與狀態累積結合,我們可以創建高效且反應迅速的應用程式。 useDebouncedUpdate 掛鉤可確保將快速變更批次處理在一起,從而減少不必要的 API 呼叫並提高效能。
重點:
- 去抖 對於管理快速連續呼叫至關重要。
- useRef 允許我們維護可變狀態而不導致重新渲染。
- 自訂 Hook 像 useDebouncedUpdate 封裝了複雜的邏輯,使元件更乾淨、更易於維護。
請隨意將此掛鉤整合到您的專案中並對其進行調整以滿足您的特定需求。快樂編碼!
以上是我如何在我的 React 應用程式中優化 API 呼叫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

簡單JavaScript函數用於檢查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //測試 var

本文探討如何使用 jQuery 獲取和設置 DOM 元素的內邊距和外邊距值,特別是元素外邊距和內邊距的具體位置。雖然可以使用 CSS 設置元素的內邊距和外邊距,但獲取準確的值可能會比較棘手。 // 設定 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能會認為這段代碼很

本文探討了十個特殊的jQuery選項卡和手風琴。 選項卡和手風琴之間的關鍵區別在於其內容面板的顯示和隱藏方式。讓我們深入研究這十個示例。 相關文章:10個jQuery選項卡插件

發現十個傑出的jQuery插件,以提升您的網站的活力和視覺吸引力!這個精選的收藏品提供了不同的功能,從圖像動畫到交互式畫廊。讓我們探索這些強大的工具:相關文章:1

HTTP-Console是一個節點模塊,可為您提供用於執行HTTP命令的命令行接口。不管您是否針對Web服務器,Web Serv

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

當div內容超出容器元素區域時,以下jQuery代碼片段可用於添加滾動條。 (無演示,請直接複製到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載
最受歡迎的的開源編輯器

Dreamweaver Mac版
視覺化網頁開發工具

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。