第27节——useMemo

一、概念

useMemo 是 React 中的一个钩子，它可以帮助你避免在不必要的情况下重新渲染组件。它通过对比当前状态和前一个状态，决定是否重新计算或记忆一个值。

接收两个参数，第一个参数是个函数，第二个是依赖项。返回一个****memoized值，只有当它的某个依赖项改变时才重新计算 memoized 值，初始化的时候也会调用一次，这种优化有助于避免在每次渲染时都进行高开销的计算

import React, { useState, useMemo } from 'react';

export default function hook() {

  const [count, setCount] = useState(1)
  const [total, setTotal] = useState(1)


  const memoizedValue = useMemo(() => {
    console.log("只有total变了我才会变")
    // 返回的值是total+1
    return total + 1
  }, [total]);


  return (
    

       setCount(count + 1)}>count + 1
       setTotal(total + 1)}>total + 1
      
count is {count}
      
total is {total}
      
memoizedValue is {memoizedValue}
    
  )
}

二、useMemo和useCallback的区别

一句话来解释，useMemo是缓存值的，useCallback是缓存函数的

三、使用场景

1、数据过滤

如果你需要在组件中过滤大量数据，并且数据不需要频繁更新，那么可以使用 useMemo 将过滤结果缓存，避免不必要的重新计算。

2、计算值

如果你需要在组件中计算某些值，并且这些值不需要频繁更新，那么可以使用 useMemo 将这些值缓存，避免不必要的重新计算。

3、预处理

如果你需要在组件中进行复杂的预处理，并且预处理结果不需要频繁更新，那么可以使用 useMemo 将预处理结果缓存，避免不必要的重新计算

4、总结

因此，如果你在组件中执行了复杂的计算，并且这些计算结果不需要频繁更新，那么可以考虑使用 useMemo 优化组件性能