React：useMemo钩子函数

说明

https://zh-hans.react.dev/reference/react/useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

const cachedValue = useMemo(calculateValue, dependencies)

第一个参数返回计算之后的结果；第二个参数是依赖项，代表依赖项发生变化，第一个参数（是个函数）才会被重新执行。

场景：如果遇到了消耗非常大的计算，才有可能用到useMemo。

示例

import { useMemo, useState } from "react"

// 计算斐波那契数列
function fib(n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}

function App() {
  const [count1, setCount1] = useState(0)

  const result = useMemo(() => {
    // 返回计算得到的结果
    return fib(count1)
    // 依赖项是count1，只有count1发生变化的时候，函数才会重新执行
  }, [count1])

  const [count2, setCount2] = useState(0)
  console.log('组件被重新渲染了')

  return (
    <div>
      this is app
      <button onClick={() => setCount1(count1 + 1)}>改变count1</button>
      <button onClick={() => setCount2(count2 + 1)}>改变count2</button>
      {result}
    </div >
  )
}

export default App

只有count1发生变化的时候，useMemo第一个参数指定的函数才会重新执行，否则使用缓存的结果渲染到页面上。改变count2，组件会重新渲染，但useMemo第一个参数指定的函数不会被重新执行。