iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

白話JavaScript系列 第 27

Day27-useMemo

前言

前兩天我們學習了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

總結

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

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


上一篇
Day26-useCallback
下一篇
Day28-Custom Hook
系列文
白話JavaScript28

尚未有邦友留言

立即登入留言