React Hooks系列之useMemo

useMemo介绍

useMemo用于性能优化，通过记忆值来避免在每个渲染上执行高开销的计算。

const memoizedValue = useMemo(callbanck, array)

返回一个memoized 值

• callback是一个函数用于处理逻辑
• array 控制 useMemo 重新执行的数组，array 改变时才会 重新执行useMemo

1. 不传数组，每次更新都会重新计算
2. 空数组，只会计算一次
3. 依赖对应的值，当对应的值发生变化时，才会重新计算（可以依赖另外一个 useMemo 返回的值）

• useMemo 的返回值是一个记忆值，是 callback 的返回值

把 创建函数 和 依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

记住，传入 useMemo 的函数会在渲染期间执行 （切记不是渲染后执行）。请不要在这个函数内部执行与渲染无关的操作，诸如副作用之类的操作属于useEffect 的适用范畴，而不是useMemo。

潜台词就是不能在useMemo 里面写副作用逻辑处理，副作用的逻辑处理放在 useEffect 内进行处理。在我的印象中和 Vue 的computed 计算属性类似。都是根据依赖的值计算出结果，当依赖的值未发生变化的时候，不触发状态改变。适用于复杂的计算场景，例如复杂的列表渲染，对象深拷贝等场景

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算他们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 ——之后再在你的代码中添加 useMemo， 以达到优化性能的目的

useMemo用法

例子：

function App () {
  const [ count, setCount ] = useState(0)
  const add = useMemo(() => count + 1, [count])
  return (
    <div>
      点击次数: { count }
      <br/>
      次数加一: { add }
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
    )
}