React - 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 [count2, setCount2] = useState(0)

  // 只有count1变化时，才重新执行斐波那契计算函数
  // useMemo 在计算密集型场景使用
  const result = useMemo(() => {
    return fib(count1)
  }, [count1])

  console.log('组件执行重新渲染')
  return (
    <div className="App">
      count1: {count1}
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      count2: {count2}
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
      result: {result}
    </div>
  )
}

export default App