React Hooks - useMeno

useMemo介绍

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 返回一个memoized值（记忆值）
• 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算
• 传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行不应该在渲染期间内执行的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo
• 如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值
• 可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证
• useMemo中文文档

useMemo简单理解

• 是一个hook
• 用于react性能优化
• 返回值是一个记忆值
• 当依赖项里面的数据变化时才执行然后返回新的值；如果依赖项里面的数据不变时，就不会执行，返回值是上一次缓存的值
• 相当于componentWillUpdate，会比useEffect先执行

const memoizedValue =useMemo(callback,array)

/**
memoizedValue :值
callback:一个函数用于处理逻辑
array: 依赖项数组；不写、每次更新都会重新计算；空数组，只计算一次；依赖对应的值，当对应的值发生变化时，才会重新计算
**/

useMemo用法例子

• 根组件

const Animal= () => {
  return (
   <div>
     <Pig></Pig>
   </div>
  )
}

• 子组件

 const Pig = () => {
   const [child,setChild] = useState(10)
   
   let memoChild = useMeno(() => {
    console.log('useMemo')
    return `小猪佩奇有${child}个孩子`
   },[child])
   
   const addChild = () =>{
      setChild(child + 1)
   }

  return (
  <>
      <p>小猪佩奇一共有几个仔</p>
      <p>答： {memoChild} </p>
      
      <Button onClick={addChild }>小猪佩奇生猪仔</Button>
      <p>{child}</p>
   </>
   )
 }