认识React Hooks: useMemo前面文章介绍了React hooks:useState、useEffect,

前面文章介绍了React hooks:useState、useEffect,

这两个hooks是写React项目的基本条件，但是对于后面代码过于臃肿，无法进行优化，接下来我们来认识下性能优化方面的Hooks:useMemo。

它的作用是允许你缓存计算结果，从而避免在每次渲染时进行不必要的计算。这在处理性能敏感的应用程序时尤其重要。以下是它的基本代码示例：

import { useMemo } from 'react';

function MyComponent({ someDependency }) {
  // 使用 useMemo 来缓存计算结果
  const memoizedValue = useMemo(() => {
    // 执行一些可能很耗时的计算
    return computeExpensiveValue(someDependency);
  }, [someDependency]); // 依赖项数组，只有当 someDependency 改变时才重新计算
  // ...
}

基本用法

useMemo 接收两个参数：

计算函数：返回你想要缓存的值。
依赖项数组：只有当数组中的元素之一发生变化时，计算函数才会重新执行。

最佳实践

避免过度优化：不要预先使用 useMemo 进行优化，除非你确定需要它来提升性能。
正确的依赖项：确保依赖项数组包含了计算函数中使用的所有变量和函数。
纯函数：计算函数应该是纯函数，这意味着相同的输入总是返回相同的输出，且不产生副作用。

注意事项

useMemo 不保证被缓存的值一定不会被重新计算，因此不应依赖它来防止副作用。
在开发模式下，为了帮助发现错误，React 可能会多次调用计算函数。

通过使用 useMemo，你可以在组件中有效地缓存那些只有在特定依赖项改变时才需要更新的计算结果，从而提高应用程序的性能和用户体验。记住，合理使用 useMemo 是关键，不要滥用它，以免引入不必要的复杂性和潜在的性能问题。