React 第二十七章 Hook useMemo

useMemo 函数可以用于缓存计算结果，以避免不必要的重复计算。

在React的函数组件中，当组件重新渲染时，函数组件内的所有代码都会重新执行。有些计算可能是非常消耗资源的，例如进行复杂的计算或进行网络请求。如果这些计算的结果在组件重新渲染时保持不变，那么就没有必要在每次重新渲染时重新计算。

这时，可以使用useMemo来缓存计算结果。useMemo接受两个参数，第一个参数是一个函数，用于进行计算；第二个参数是一个数组，用于指定依赖项。只有当依赖项发生变化时，useMemo才会重新计算。否则，它会返回缓存的计算结果。

例如，假设有一个计算函数calculate，接受两个参数，根据这两个参数进行复杂的计算。可以使用useMemo来缓存计算结果：

const result = useMemo(() => calculate(param1, param2), [param1, param2]);

在上面的例子中，只有当param1或param2发生变化时，calculate函数才会重新执行。否则，它会返回之前缓存的结果。

使用useMemo可以有效提高React函数组件的性能，特别是在处理大量数据或复杂计算的情况下。

useMemo 和 useCallback 的区别及使用场景?

useMemo 和 useCallback 接收的参数都是一样

• 第一个参数为回调
• 第二个参数为要依赖的数据。

共同作用：依赖数据发生变化，更新缓存。

两者区别：

1. useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如：需要进行二次计算的状态
2. useCallback 计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。