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. 记忆的值不变就不会触发重新渲染

You may rely on useMemo as a performance optimization, not as a semantic guarantee.

范例

这里示范一下用 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)