useMemo

useMemo

我们应该如何去正确理解useMemo呢

function fib(n) {
    console.info('计算函数被执行1')
    return n < 3 ? 1 : fib(n - 2) + fib(n - 1)
}
function App() {
    const [count1, setCount1] = useState(0)
    const [count2, setCount2] = useState(0)
    console.info('组件重新渲染了')

  //   现在我们有个需求，是基于 count1 的求和
    const result = fib(count1)
  return (
    <>
      <div className="App">
          根据 count1 的求和：{result}
          <button onClick={() => { setCount1(count1 + 1) }}>change count1: {count1}</button>
          <button onClick={() => { setCount2(count2 + 1) }}>change count2: {count2}</button>
      </div>
    </>
  )
}

其实就是当我们需要对state的数据进行处理的时候，可以用useMemo了

以下这行代码，在每次组件渲染时都会执行（也就是每次state更新的时候），所以我们需要用useMemo包起来，使它仅在count1改变的时候执行

const result = fib(count1)

改造如下

const result = useMemo(() => {
    return fib(count1)
}, [count1])