由一个问题引出的 useMemo

谁适合阅读本文
本文主要讲解 useMemo 的用法，需要读者对 React Hooks 有一定的了解。

我们先来看这样一段代码：

import React, { useState } from 'react'

export default () => {
  const [count, setCount] = useState(0)
  const [value, setValue] = useState('')
  const parsedCount = () => {
    console.log('parsed')
    return (count + 5) * 3
  }
  return (
    <div>
      <p>count: {count}</p>
      <p>parsedCount: {parsedCount()}</p>
      <input type='text' value={value} onChange={e => setValue(e.target.value)} />
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        add count
      </button>
    </div>
  )
}

这段代码中有两个 state： count 和 value，并且还有一个根据 count 计算衍生出的 parsedCount。当我们点击按钮的时候，调用 setCount() 改变了 count，parsedCount 随之改变，打开控制台就可以看到打印了一行 parsed。

然而，当我们在输入框中输入文字，仅仅调用 setValue() 改变了 value 时，发现控制台上仍然打印了一行 parsed。说明组件在渲染时这个函数执行了，尽管它的唯一依赖项 count 没有发生改变。

为了解决这个问题，我们可以使用 useMemo。

引入 useMemo

import { useMemo } from 'react'

useMemo 接受两个参数，第一个参数是一个函数，第二个参数是一个依赖数组，仅当数组中的依赖变化时，函数才重新执行。此处将 parsedCount 的函数体作为第一个参数，把 count 放入数组中作为第二个参数。

const parsedCount = useMemo(() => {
  console.log('parsed')
  return (count + 5) * 3
}, [count])

useMdemo 返回一个 memoized 值，因此 parsedCount 不再以函数的形式使用，直接以表达式的形式使用。

<p>parsedCount: {parsedCount}</p>

这样，我们减少了 value 改变时组件的额外开销，完成了组件渲染的优化 😃。

参考

• useMemo 官方文档