数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告