資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學ReactJS – useCallback 鉤子
在本文中，我們將瞭解如何透過傳遞**記憶化函式**來最佳化 React 應用程式。
此鉤子用於透過返回一個記憶化函式來最佳化 React 應用程式，這有助於防止不必要的函式重新渲染。此鉤子儲存函式的快取值，並且僅在傳遞的依賴項發生更改時才更新函式。
語法
const memoizedCallback = useCallback(() => {doSomething(a, b); }, [a, b],);這裡，只有當 a 或 b 的值發生變化時，才會在下次重新渲染時再次呼叫**doSomething()** 函式；否則，只傳遞函式的快取版本。
**注意：**useCallback(fn, []) 等同於 useMemo(() => fn, [])。
無 useCallback 鉤子
示例
在這個例子中，我們將構建一個具有 3 個輸入欄位的 React 應用程式，它將顯示函式**add**返回的兩個數字之和。
App.jsx
import React, { useState } from 'react';
const App = () => {
const [name, setName] = useState('');
const [num1, setNum1] = useState(0);
const [num2, setNum2] = useState(0);
const ans = adder(num1, num2);
return (
<div>
<input
placeholder="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
placeholder="Value 1"
value={num1}
onChange={(e) => setNum1(e.target.value)}
/>
<input
placeholder="Value 2"
value={num2}
onChange={(e) => setNum2(e.target.value)}
/>
{ans}
</div>
);
};
const adder = (a1, a2) => {
console.log('Adding numbers');
return parseInt(a1) + parseInt(a2);
};
export default App;在上面的例子中，當用戶輸入名稱時，即使如此，**add**函式也會在每次重新渲染時被呼叫，這使得 React 應用程式沒有得到最佳化。**Add**函式在每次重新渲染時都會被呼叫，因為當用戶輸入時，狀態會發生變化，從而導致應用程式重新渲染。
輸出
這將產生以下結果。
使用 useCallback 鉤子
示例
App.jsx
import React, { useState,useCallback } from 'react';
const App = () => {
const [name, setName] = useState('');
const [num1, setNum1] = useState(0);
const [num2, setNum2] = useState(0);
const ans = useCallback(() => {
adder(num1, num2);
}, [val1, val2]);
return (
<div>
<input
placeholder="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
placeholder="Value 1"
value={num1}
onChange={(e) => setNum1(e.target.value)}
/>
<input
placeholder="Value 2"
value={num2}
onChange={(e) => setNum2(e.target.value)}
/>
{ans}
</div>
);
};
const adder = (a1, a2) => {
console.log('Adding numbers');
return parseInt(a1) + parseInt(a2);
};
export default App;在上面的例子中，即使使用者輸入名稱，**add**函式也不會被呼叫，因為它提供了函式的快取版本，並且只有當**a**或**b**的值發生變化時才會更新它。
輸出
這將產生以下結果。
更新於：2021年3月18日
1K+ 次瀏覽
廣告