React性能提升 - useMemo hook简介
Hooks彻底改变了开发者构建React应用的方式，为状态和副作用的处理提供了更直观、更函数式的方法。在众多Hook中，`get`useMemo因其通过记忆计算值来优化性能而脱颖而出。让我们一步步深入了解这个强大的Hook。
📌 目录
useMemo Hook 是什么？
useMemo`React.hock` 是 React 16.8 中引入的一个钩子，它允许你记忆耗时的计算，确保除非依赖项发生变化，否则这些计算不会被重新执行。这有助于优化性能，尤其是在计算量大的场景下。
为什么我们需要使用备忘录？
想象一下这样的场景：某个函数频繁重新渲染，或者每次组件更新时都要执行大量计算。这会降低应用程序的性能。通过使用 `resolve` useMemo，您可以确保耗时计算的结果被存储起来，并且仅在必要时才重新计算。
useMemo 的语法
该useMemo钩子函数的语法很简单：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
这里computeExpensiveValue是一个假设的函数。提供给该函数的函数仅在参数或值发生变化useMemo时才会重新计算。ab
语法解析
- 回调函数：第一个参数
useMemo是一个计算并返回值的函数。 - 依赖关系数组：第二个参数是一个依赖关系数组。只有当该数组中的任何值发生变化时，记忆值才会重新计算。
备忘录的基本使用示例
假设我们有一个书籍列表，我们想根据用户的搜索查询来筛选它们。
请看这个简单的例子：
function App() {
const [query, setQuery] = useState('');
const [books, setBooks] = useState(['Harry Potter', 'Lord of the Rings', 'Hobbit', 'Percy Jackson']);
const filteredBooks = books.filter(book => book.toLowerCase().includes(query.toLowerCase()));
return (
<div>
<input
type="text"
value={query}
placeholder="Search for a book..."
onChange={e => setQuery(e.target.value)}
/>
<ul>
{filteredBooks.map(book => (
<li key={book}>{book}</li>
))}
</ul>
</div>
);
}
在这个例子中，每次组件重新渲染时，我们都会过滤整个书籍列表，即使书籍或查询没有改变。
通过使用useMemo，我们可以优化过滤：
function App() {
const [query, setQuery] = useState('');
const [books, setBooks] = useState(['Harry Potter', 'Lord of the Rings', 'Hobbit', 'Percy Jackson']);
const filteredBooks = useMemo(() =>
books.filter(book => book.toLowerCase().includes(query.toLowerCase())),
[books, query]
);
return (
<div>
<input
type="text"
value={query}
placeholder="Search for a book..."
onChange={e => setQuery(e.target.value)}
/>
<ul>
{filteredBooks.map(book => (
<li key={book}>{book}</li>
))}
</ul>
</div>
);
}
books现在，只有当数组或数据发生变化时，才会再次筛选书籍query。这样可以确保在组件的其他无关部分更新时，我们不会进行不必要的计算。
使用备忘录时常见的错误
-
过度使用：并非组件中的每个值或函数都需要记忆。
useMemo仅在必要时使用，因为它会增加不必要的复杂性和开销。 -
忽略依赖项：务必确保
useMemo回调函数中使用的每个值都列在依赖项数组中。忽略依赖项会导致值过时，并引发难以调试的问题。
何时使用 useMemo？
- 当你处理繁重的计算任务时。
- 当相同的计算重复多次，且对于相同的输入返回相同的结果时。
- 当渲染大型列表或数据网格时，您希望避免不必要的重新渲染。
使用备忘录 vs 使用回调
两者useMemo都useCallback用于优化性能，但它们的使用场景略有不同：
useMemo返回一个已记忆的值。useCallback返回一个已记忆的回调函数。
如果你想优化一个函数（而不是它的结果）以避免子组件中的重新渲染或重新调用，那么这useCallback就是你的首选方法。
总结
HookuseMemo是一个强大的工具，它通过记忆耗时的计算来优化 React 应用。通过理解它的用途、语法和最佳实践，开发者可以构建高效且响应迅速的应用。请记住，虽然 HookuseMemo非常有用，但应该谨慎使用，仅在必要时才使用。
就这样啦！😃 谢谢阅读！🎉
文章来源：https://dev.to/rasaf_ibrahim/react-performance-booster-introduction-to-the-usememo-hook-212i