usememo用法
时间: 2024-01-18 11:03:46 浏览: 28
`useMemo` 是 React 提供的一个 Hook 函数,它可以在函数组件中缓存计算结果,避免反复计算,提高组件性能。
`useMemo` 接受两个参数:
1. 第一个参数是一个函数,它返回需要缓存的计算结果。
2. 第二个参数是一个数组,包含了用于计算结果的依赖项。只有当依赖项发生变化时,才会重新计算结果。
`useMemo` 的使用场景主要包括:
1. 计算量比较大的函数,如数组排序、过滤等操作。
2. 函数的计算结果需要在多个组件中使用。
举个例子,假设有一个数组需要进行排序并渲染到页面上,我们可以将排序的逻辑放在 `useMemo` 中,只有当数组发生变化时才重新计算排序结果:
```jsx
import React, { useMemo, useState } from 'react';
function SortableList({ items }) {
const sortedItems = useMemo(() => {
console.log('sorting items');
return items.sort();
}, [items]);
return (
<ul>
{sortedItems.map(item => (
<li key={item}>{item}</li>
))}
</ul>
);
}
function App() {
const [items, setItems] = useState(['apple', 'banana', 'cherry']);
function handleAddItem() {
setItems([...items, prompt('Enter a new item')]);
}
return (
<div>
<button onClick={handleAddItem}>Add Item</button>
<SortableList items={items} />
</div>
);
}
```
在上面的例子中,每次添加新的元素时,只有排序的逻辑被重新计算,而不是整个组件重新渲染,从而提高了性能。