Hooks-useMemo

useMemo

1. 说明

• useMemo 可以让你在函数组件中 缓存计算结果

2. 语法

2.1 语法格式

const memoizedValue = useMemo(() => fn(a,b), deps[a,b])

2.2 语法说明

• 它接收两个参数，
  • 第一个参数为回调函数 (计算过程fn，必须返回一个结果)，
  • 第二个参数是依赖项(数组)，当依赖项中某一个发生变化，结果将会重新计算。
• 注意 : 因为是缓存计算结果,所以参数1回调函数里面一定要有return返回值

2. 使用

• 使用 useMemo 之前
  • 问题 : 每次点击干扰项 other, 都要重新计算一下,所以需要缓存值

const App = () => {
  const [count, setCount] = useState(0)
  const [other, setOther] = useState(0)

  // 累加的方法
  function calcCount(count) {
    console.log('重新计算了一次')
    let _sum = 0
    for (var i = 1; i <= count; i++) {
      _sum += i
    }
    return _sum
  }
  // 结算的结果
  let sum = calcCount(count)

  return (
    <div>
      <div>
        参数 : {count} 累加 : {sum}
      </div>
      <button onClick={() => setCount(count + 1)}>修改参数</button>
      <button onClick={() => setOther(other + 1)}>干扰项 {other}</button>
    </div>
  )
}

• 使用 useMemo

  // 累加的方法 
  function calcCount(count) {
    console.log('重新计算了一次')
    let _sum = 0
    for (var i = 1; i <= count; i++) {
      _sum += i
    }
    return _sum               #  记忆的是 _sum
  }
  // 结算的结果 
  let sum = useMemo( () => calcCount(count),  [count])      #   使用 useMemo 

  return (
    <div>
      <div>
        参数 : {count} 累加 : {sum}
      </div>
      <button onClick={() => setCount(count + 1)}>修改参数</button>
      <button onClick={() => setOther(other + 1)}>干扰项 {other}</button>
    </div>
  )