数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程序设计
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法律学ReactJS – useMemo 钩子
在本文中，我们将了解如何通过传递备忘值来优化 React 应用程序。
此钩子用于优化 React 应用程序，方法是返回一个备忘值，以此避免对每次重新渲染都进行复杂的计算。此钩子存储缓存的值，并且仅在一些已定义的条件下更新函数。
注意：请勿在 useMemo 钩子中调用副作用；请使用 useEffect 钩子。
语法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
此处，computeExpensiveValue() 函数的返回值仅在下次重新渲染中更改，如果 a 或 b 的值发生更改。
没有 useMemo 钩子
示例
在此示例中，我们将构建一个 React 应用程序，其中有 3 个输入字段，并将显示函数 add 返回的两个数字的总和。
App.jsx
import React, { useState } from 'react';
import './App.css';
const App = () => {
const [name, setName] = useState('');
const [val1, setVal1] = useState(0);
const [val2, setVal2] = useState(0);
const answer = add(val1, val2);
return (
<div>
<input
placeholder="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
placeholder="Value 1"
value={val1}
onChange={(e) => setVal1(e.target.value)}
/>
<input
placeholder="Value 2"
value={val2}
onChange={(e) => setVal2(e.target.value)}
/>
{answer}
</div>
);
};
const add = (num1, num2) => {
console.log('Adding numbers');
return parseInt(num1) + parseInt(num2);
};
export default App;在上述示例中，即使用户键入姓名，add 函数也会在每次重新渲染时调用，这使得 React 应用程序未优化。Add 函数在每次重新渲染时都被调用，因为当用户键入时，状态会发生更改，从而重新渲染应用程序。
输出
这将生成以下结果。
使用 useMemo 钩子
示例
App.jsx
import React, { useMemo, useState } from 'react';
import './App.css';
const App = () => {
const [name, setName] = useState('');
const [val1, setVal1] = useState(0);
const [val2, setVal2] = useState(0);
const answer = useMemo(() => {
return add(val1, val2);
}, [val1, val2]);
return (
<div>
<input
placeholder="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
placeholder="Value 1"
value={val1}
onChange={(e) => setVal1(e.target.value)}
/>
<input
placeholder="Value 2"
value={val2}
onChange={(e) => setVal2(e.target.value)}
/>
{answer}
</div>
);
};
const add = (num1, num2) => {
console.log('Adding numbers');
return parseInt(num1) + parseInt(num2);
};
export default App;在上述示例中，即使用户键入姓名，也不会调用 add 函数，因为它仅在val1 和 val2 的值发生更改时才被调用。
输出
这将生成以下结果。
更新于：19-3 月-2021
714 阅读
广告