前言

前兩天我們學習了React性能優化

• memo 組件記憶
• useCallback 函式參考記憶

而今天我們會學習useMemo來記住回傳值，避免每次重複函式計算。

useMemo

syntax

useMemo(() => {
    //block
},[dependency])

以下我們有個組件，只要組件內的input表單輸入，或是點擊add button使state增加都會重新執行for迴圈。

//App.js
import React, {useState,useMemo} from 'react'

function App() {
  const [name, setName] = useState('')
  const [state, setState] = useState(0)

  let temp = 0

  for(let i = 0; i < state; i++) {
    console.log('changed')
    temp += i
  }

  return(
    <div>
      <p>Memo:{temp}</p>
      <p>{state}</p>
      <button onClick={() => setState(state+1)}>add</button>
      <div>
        <input type="text" onChange={(e) =>setName(e.target.value)}/>
        <p>{name}</p>
      </div>
    </div>
  )
}

export default App

但我們只要state的值改變才執行迴圈，而不是組件中狀態改變就執行一遍。

於是我們使用useMemo紀錄前一次的數值，並且綁定我們的依賴到state。

當state的值被改變了，才會呼叫callback執行迴圈，若依賴的數值沒有改變，便會回傳上次所記憶的數值。

這樣我們可以避免額外的操作導致效能浪費。

//App.js
import React, {useState,useMemo} from 'react'

function App() {
  const [name, setName] = useState('')
  const [state, setState] = useState(0)


  const result = useMemo(() => {
    let temp = 0
    for(let i=0; i <= state; i++) {
      temp += i
    }
    return temp
  },[state])

  
  return(
    <div>
      <p>Memo:{result}</p>
      <p>{state}</p>
      <button onClick={() => setState(state+1)}>add</button>
      <div>
        <input type="text" onChange={(e) =>setName(e.target.value)}/>
        <p>{name}</p>
      </div>
    </div>
  )
}

export default App

總結

這三天我們學了關於性能優化的部分，雖說使用記憶的方式會造成額外的效能消耗，但一定比不使用所造成的浪費低很多。

當然也可以把組件分的細，使耦合性降低!!!