Re: 新手让网页 act 起来: Day24 - React Hooks 之 useMemo

前言

昨天我们介绍过如何使用 React.memo 与 useCallback 来做效能优化，而 useMemo 这个 hook 一样也是用来优化效能的，今天就来介绍 useMemo 的基本使用方式吧！

useMemo

首先，刚接触 React 时，看到 memo 与 useMemo 有时一定会搞混。memo 是一个 HOC (Hight order component) ，接收一个元件并且回传一个元件。而 useMemo 是 React hooks 的其中一个 hook ，与 useCallback 类似，接收两个参数

1. callback 并且回传一个值
2. dependency array

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

useMemo 会将第一个传进去的 callback return 的 value 记住，然後当 dependecny 有变动时，才会重新呼叫 callback 并 return 新的值。

看到这边可以发现，它跟 useCallback 实在太像了！useCallback 是会纪录函式，而 useMemo 是纪录值。所以，以下的等式是成立的！

useCallback(fn, []) = useMemo(() => fn, [])

虽然 useMemo 能够取代 useCallback ，但透过不同名称的 api 能够聚焦在不同的情境上。

接下来就来看看如何使用 useMemo 吧！

function computeExpensiveValue(number) {
  console.log('execute expensive function')
  return number <= 0 ? 1 : number * computeExpensiveValue(number - 1);
}

function App() {
  const [number, setNumber] = React.useState(10)
  const [click, setClick] = React.useState(0)
  const result = computeExpensiveValue(number)

  function onChangeHandler(e) {
    setNumber(Number(e.target.value))
  }

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={number} />
      {result}
      <button onClick={() => setClick(click + 1)}>{click}</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

上面范例中，我们定义了递回函式，当我们给的数字越大，执行的次数会随之增加。当我们按下 button 改变 click 的 state 触法元件 re-render 这个函式都会重新执行。

但其实我们希望这个递回函式，只要在数字改变的时候再做计算，其他的 state 改变都应改与它无关，所以这个时候就可以使用 useMemo 解决这个问题。

const result = React.useMemo(() => fibonacci(number), [number])

当我们使用 useMemo 纪录这个 result ，只要 number 的 state 不改变，就算元件 re-render ，也都不会重新执行递回函式。

以上就是关於 useMemo 的基本介绍与使用方式，如果有任何问题都欢迎在下方留言！

该文章同步发布於：我的部落格