跳过昂贵的性能开销 ——useMemo（11）

useMemo

用来缓存数据以避免不必要的性能开销

const cachedValue = useMemo(calculateValue, dependencies)

接收两个参数,一个函数还有一个依赖数组

dependencies包含useMemo所依赖的变量的值,数组的任何值发生变化时,函数才会被重新执行

calculateValue可能是一个需要很长时间来计算的函数, 组件重新加载的时候不会触发重新计算

import { useMemo, useState } from 'react'

function Memo() {
  const [sum, setSum] = useState(0)
  const expensiveValue = useMemo(() => {
    // 用来缓存“昂贵”的计算结果
    return sum * 2
  }, [sum])
  return (<>1</>)
}

export default Memo

假设这个计算很昂贵

但是好像都说移除非必要的useMemo,所以我了解一下就算了