資料結構
網路
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 閱讀
廣告