基本使用
1
2
3
4
5
6
7
| const [price, setPrice] = useState(100);
const [qty, setQty] = useState(1);
const [text, setText] = useState('');
const memoTotal = useMemo(() => {
return price * qty
}, [price, qty])
|
useMemo 可以讓我們依據定義好的資料，產生新的資料。上面範例中，將要觀察的 price, qty 傳入 useMemo 中，當值有更動時，就會重新計算結果並回傳到 memoTotal 上。
範例
1
2
3
4
5
6
7
8
9
| const [products, setProducts] = useState(sampleData);
const [ascending, setAscending] = useState(true);
const [search, setSearch] = useState('');
const filterProducts = useMemo(() => {
return [...products]
.filter((product) => product.title.match(search))
.sort((a, b) => ascending ? a.price - b.price : b.price - a.price);
}, [ascending, search]);
|
上面是使用 useMemo 進行商品搜尋範例，當觀測的 ascending, search 有更動時，就執行商品篩選
使用 memo 方法
在 react 裡面，只要有更新 useState 裡的資料，整個元件都會重新渲染一次。為了避免元件被重複渲染過多次，可使用 memo 方法。
- 將 memo 解構出來
1
| const { useState, useEffect, useMemo, memo } = React;
|
- 將元件作為參數傳入 memo，只有當元件的 props 被更新時才會重新渲染元件，其他 state 更動時，元件不受影響。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const DataTable = memo(({ filterProducts }) => {
console.log('data-table 已經被渲染')
return (<table className='table'>
<tbody>
{filterProducts.map((product) => {
return (
<tr key={product.id}>
<td>{product.title}</td>
<td>{product.price}</td>
</tr>
);
})}
</tbody>
</table>)
})
|