iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

前端日常,每天 React 一下系列 第 28

【Day 27】Hook 07:useMemo

useMemo

  • 用於性能優化,避免重複執行高效能的渲染
  • 如果傳入的參數未改變,就直接沿用上次的計算結果。
  • 遇到計算複雜、耗效能的地方,先用 useMemo 計算是否需要執行
  • 結果會被緩存,以便每次確認是否變更內容

useMemo 與 React.memo 一樣,
作用是優化效能,
適合用在複雜緩慢且變動性不大,
其結果不需要經常 re-render 的計算上。


使用方式

const memorizedValue = useMemo(callback, array)
  • callback:處理計算邏輯的 function
  • array:當數組內容發生改變時才重新執行,若無 array,則每次 render 時依然會重新計算值

useMemo 內執行的 function 會於 render 期間執行,而 useEffect 的內容是在 render 後執行,因此 useMemo 內不能使用 useEffect。


範例

function slowFunction(num) {
  console.log('Calling Slow Function');
  
  for(let i=0; i<=1000000; i++) {}
  return num*2;
}

const App = () => {
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(true);

  const doubleNumber = useMemo(() => slowFunction(number), [number]);
  
  const themeStyle = useMemo(() => {
    return {
      backgroundColor: dark ? '#2c3e50': '#ecf0f1',
      color: dark ? '#ecf0f1' : '#2c3e50'
    }
  }, [dark])
   
  
  useEffect(() => {
    console.log('Theme Change')
  }, [themeStyle])

  const changeHandler = e => {
    setNumber(e.target.value)
  }
  
  const changeTheme = () => {
    setDark(prevDark => !prevDark)
  }
  
  return (
    <>
        <input type='number' value={number} onChange={changeHandler} />
        <button onClick={changeTheme}>Change Theme</button>
    </>
  )
};

參考資料


上一篇
【Day 26】渲染備忘:Memo
下一篇
【Day 28】Hook 08:useCallback
系列文
前端日常,每天 React 一下30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:10:10

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

Emi iT邦新手 4 級 ‧ 2021-10-14 17:28:58 檢舉

感謝應援~
目前文章已經都打完了
等著明天發出最後一篇完賽囉~!

我要留言

立即登入留言