React useCallBack() 簡介

使用 React 構建網站時，重要的是要考慮它的加載速度以及用戶與之交互的速度。 使 React 網站更快的一種方法是防止它做不必要的工作，例如重新呈現頁面中未更改的部分。

React 中的useCallback()函數通過記住我們定義的函數並僅在必要時重新創建它們來幫助我們實現這一點。這可以使網站更快，對用戶的響應更快。 根據同年的Stack Overflow 調查，React 是最流行的前端 JavaScript 庫，這表明 useCallback() 可能在業界得到廣泛使用。

在本文中，我們將解釋什麼是React 中的 useCallBack() 以及如何在我們的 React 代碼中使用它來提高性能。

React 中的 useCallBack 是什麼？

useCallback() 是 React 提供的鉤子函數，用於記憶函數。 換句話說，它有助於通過避免不必要的重新渲染來優化組件的性能。

在 React 中，當組件的狀態或屬性發生變化時，組件會重新渲染以反映更新後的值。 此過程的計算成本很高，如果處理不當會降低應用程序的性能。 這就是 useCallback() 派上用場的地方。

使用 useCallback()，用戶可以記住一個函數，這意味著它僅在其依賴項發生變化時才被重新定義。 這可以防止不必要的組件重新渲染，從而優化應用程序的性能。

這是一個例子——

const memoizedCallback = useCallback(

() => {

做某事（a，b）；

},

[a, b],

);

雖然通過教程開始使用 React 是一種很好的方式，但通過動態課程開始開發可以顯著幫助您更新技能。 查看軟件開發的執行研究生課程——從 upGrad 到 kickstart 的全棧開發專業化課程！

使用 useCallBack() 的優點

以下是使用 React useCallBack() 的一些優點 –

• useCallback() 可以通過防止不必要的組件更新來幫助 React 應用程序運行得更快。
• 如果組件獲取大量數據並將其顯示為圖形，則可以從 useCallback() 中受益。
• 如果圖形的父組件更新，但更改不會影響圖形，則無需更新它並再次獲取數據。
• 使用 useCallback() 來記憶獲取數據的函數，我們可以避免不必要的更新並使應用程序更快更流暢。
• 這種優化可以改善用戶體驗，因為應用程序將更快、更高效地運行。

查看 upGrad 的軟件開發課程來提高自己的技能。

useCallBack() 的語法和參數

const memoizedCallback = useCallback(

() => {

做一點事（）;

},

[依賴關係 1，依賴關係 2]

);

在示例中， useCallback()掛鉤記憶了doSomething()函數，這意味著它緩存了先前創建的版本。除非dependency1或dependency2的值​​發生變化，否則緩存函數將僅用於後續渲染。

如果這些依賴項中的任何一個發生變化，將創建一個新版本的doSomething()函數，並且緩存的版本將被替換為新版本。 這有助於通過防止不必要的函數創建和重新呈現來優化應用程序的性能。

useMemo() 和 useCallBack() 的區別

useCallback和 useMemo 是 React Hooks，可以通過記憶值來提高 React 應用程序的性能。 兩個鉤子都將函數作為參數並返回該函數的記憶版本。

這是兩者之間的區別：

何時使用 useCallBack() 的場景

以下是可以使用 useCallBack() 的場景 –

子組件優化

useCallback React優化依賴引用相等性的子組件以避免不必要的渲染，尤其是在將回調傳遞給這些子組件時。

防止不必要的渲染

當你有一個組件的子元素在不需要它的情況下重複渲染時， React useCallback特別有用。 您可以將回調函數和依賴項數組傳遞給useCallback以防止不必要的渲染。

借助upGrad 的全棧軟件開發訓練營課程，利用您的機會詳細了解 useCallBack() 函數。

探索我們的熱門軟件工程課程

useCallBack() 的例子

以下是如何實現 useCallBack() 掛鉤的一些示例。

使用回調示例 1

當父組件將函數作為 prop 傳遞給子組件時，頻繁重新渲染父組件會導致子組件不必要地重新渲染。 在這種情況下，使用 useCallback 來記住可以幫助防止這些不必要的重新渲染的功能。

從“反應”中導入反應，{useCallback}；

功能父組件（）{

const handleButtonClick = useCallback(() => {

console.log('點擊按鈕');

}, []);

返回 （

<ChildComponent onClick={handleButtonClick} />

);

}

函數 ChildComponent({ onClick }) {

返回 （

<button onClick={onClick}>點我</button>

);

}

使用回調示例 2

假設您有一個對大型數據集執行複雜計算的函數。 如果此函數被頻繁調用並且執行時間很長，可能會導致應用程序出現性能問題。 在這種情況下，您可以使用 useCallback 來記憶函數並防止不必要的重新執行計算。

從'react'導入React，{useState，useCallback}；

功能父組件（）{

const [數據, setData] = useState([]);

const processData = useCallback(() => {

const processedData = “處理後的數據”;

返回處理數據；

}， [數據]）;

返回 （

<ChildComponent processData={processData} />

);

}

函數 ChildComponent({ processData }) {

常量結果 = processData();

返回 （

<div>{結果}</div>

);

}

使用 useCallBack() 進行反應性能優化

useCallback 鉤子是React 中的一個強大工具，它允許你記憶一個函數，確保它只有在它的一個依賴項發生變化時才被重新創建。 這對於頻繁調用的性能密集型函數特別有益。 查看下面的示例，了解如何使用它 –

從'反應'導入{useState，useEffect}；

功能應用程序（）{

const [word, setWord] = useState(“Bob”);

const say = () => console.log(`你的話是：${word}`);

使用效果（（）=> {

說（）;

}， [說]）;

return <div>歡迎光臨！</div>;

}

該示例演示了 useEffect 掛鉤依賴於 say 函數，這意味著它應該只在函數發生變化時觸發。 然而，由於 React 的引用相等性檢查，say 函數將始終評估為真，即使在沒有實際更改的情況下，也會導致不必要的渲染。

useEffect 回調將在每個渲染上使用，這不適合性能。 解決此問題的一種方法是將函數重新定位到 useEffect 塊，但這不是理想的解決方案，因為您將無法在任何其他地方使用該函數。 看看下面這個例子——

從“反應”中導入反應，{useState，useEffect}；

功能應用程序（）{

const [word, setWord] = useState(“Bob”);

const say = () => console.log(`你的話是：${word}`);

使用效果（（）=> {

說（）;

}， [說]）;

return <div>歡迎光臨！</div>;

}

另一種解決方案是通過包裝函數來實現useCallback 掛鉤。 必須記住 useCallback 函數需要一個依賴數組，就像 useEffect 一樣。 如果函數接受任何變量，用戶可以將其與數組一起傳遞； 否則將其留空。 在這裡，由於 say 函數依賴於 word 變量，我們將其包含在數組中。

從“反應”導入{useState，useEffect，useCallback}

功能應用程序（）{

const [word,setWord]=useState(“Bob”)

const say = useCallback(()=>console.log(`你的話是：${word}`),[word])

使用效果（（）=>{

說（）

}，[說]）

返回<div>歡迎！</div>

}

什麼時候不使用 useCallBack()

雖然 useCallback() 是在某些情況下優化性能的有用工具，但有時它也是不必要的，甚至是有害的。 以下是何時不使用 useCallback() 的一些示例：

• 當函數作為 prop 傳遞時，它已經是一個不依賴於外部狀態的純函數。
• 當函數作為 prop 傳遞時，它不會導致任何性能問題，也不會被過度調用。
• 當函數作為 prop 傳遞時，它會在多個地方使用，並且每次都需要重新創建以反映不同的行為或依賴關係。
• 當函數作為 prop 是小組件樹的一部分傳遞時，useCallback() 帶來的性能提升可以忽略不計。
• 當函數作為 prop 傳遞時，它被用作事件處理程序並且只被調用一次。

在這些情況下，由於創建和維護記憶回調的開銷，使用 useCallback() 實際上可能會降低性能。 在決定是否使用 useCallback() 之前，仔細考慮每個用例並權衡潛在收益和潛在成本非常重要。

需求軟件開發技能

結論

使用 useCallback 可以成為優化 React 應用程序性能的強大工具。 通過記憶功能，可以避免不必要的重新渲染，從而帶來更流暢、更高效的用戶體驗。 但是，明智地使用 useCallback 並了解最有效的場景非常重要。

upGrad 提供計算機科學理學碩士課程，提供全面的計算機科學教育，重點是與行業相關的技能。 該計劃適用於任何新手或更有經驗的個人，以提高他們的軟件開發技能。 通過這門課程，學生將準備好在現實世界中提升他們的職業生涯，並成為他們所嚮往的領域的專家。