iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

用30天更加認識 React.js 這個好朋友系列 第 8

Day8-React Hook 篇-認識 useMemo

今天介紹的是避免重新渲染的 hook useMemo,透過它可以使我們提升 React 網站的效能。

useMemo

由於當元件重新渲染時,複雜的函式又會重複執行一次,為了避免函式又進行不必要的執行,所以透過 useMemo 將函式運算完的值存起來。像需要花比較多時間執行的複雜函式都適合使用 useMemo。

語法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  • 第一個參數是 callback function
  • 第二個參數是一個陣列,此陣列不作為傳到 callback function 的參數
    • useMemo(computation): 如果沒有加上這個陣列,每次都會重新執行函式去產生新的值
    • useMemo(computation, []): 空陣列的話,回傳值不會改變
    • useMemo(computation, [...someValues]): 有加上一些元素值的話,當元素值改變時會重新更新函式回傳值
  • memoizedValue 紀錄 useMemo 回傳的記憶值

特性

  1. 傳到 useMemo 的第一個參數函式會在 render 元件時執行
  2. 記憶的值不變就不會觸發重新渲染

範例

這裡示範一下用 useMemo 去包住 Math.random() 函式,所以除了第一次渲染之外,每次印出 memoizedValue 都會出現一樣的值。

import React, { useState, useMemo } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => {
    return Math.random();
  }, []);

  console.log(memoizedValue);

  return (
    <p>
      <button onClick={() => setCount(count + 1)}> Click </button>
    </p>
  );
}

程式碼範例(codesandbox)


上一篇
Day7-在認識 useMemo 前,先認識 React.memo
下一篇
Day9-React Hook 篇-認識 useCallback
系列文
用30天更加認識 React.js 這個好朋友32

尚未有邦友留言

立即登入留言