React函数式组件值之useMemo()和useCallback()

一、基础用法

• useMemo可以保证依赖的值未发生改变的时候，不触发值改变。
• useCallback可以保证依赖的值未发生改变的时候，不触发函数引用的改变。

//当count变化，sum的值会改变
const sum = useMemo(() => {
  return count + 1;
}, [count]);
//当count变化，getSum函数会改变
const getSum = useMemo(() => {
  return count + 1;
}, [count]);

第二参数含义：

• 不传数组，每次更新都会重新计算
• 空数组，只会计算一次
• 依赖对应的值，当对应的值发生变化时，才会重新计算

二、应用场景

　　React的函数式组件在直接使用useState或使用useEffect间接调用useState时，会导致整个函数的重新执行。其中，函数组件包裹的所有的变量、常量、函数都会被重新初始化，相当于props整体更新，所有组件内的子组件重新绘制。但并不是每个子组件都有必要重绘，有的根本没有变化，这时，就需要使用useMemo和useCallback保证函数组件内常量与函数的唯一性。

import React, { useState, memo, useMemo, useCallback } from 'react'
const Child = memo((props) => {
  console.log(props);
  return (
    <div>
      <input type="text" onChange={props.onChange}/>
    </div>
  )
})
const Parent = () => {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')
  const handleOnChange = useCallback((e) => {
    setText(e.target.value)
  },[])
  return (
    <div>
      <div>count: {count}</div>
      <div>text: {text}</div>
      <button onClick={() => {
        setCount(count + 1)
      }}>+1</button>
      <Child onChange={handleOnChange} />
    </div>
  )
}
function App() {
  return <div><Parent /></div>
}
export default App

　　上面代码中，handleOnChange被缓存了下来，尽管父组件更新了，但是拿到的handleOnChange还是同一个，对比useMemo，useMemo缓存的是一个值，useCallback缓存的是一个函数，是对一个单独的props值进行缓存，memo缓存的是组件本身，是站在全局的角度进行优化。

　　需要注意的是，useMemo 会在渲染的时候执行，而不是渲染之后执行，这一点和 useEffect 有区别，所以 useMemo 不建议有 副作用相关的逻辑。

　　useMemo根据依赖的值计算出结果，当依赖的值未发生改变的时候，不触发状态改变。一般开发，在向子组件传递函数props时，每次 render 都会创建新函数，导致子组件不必要的渲染，浪费性能，这个时候，就是 useCallback 的用武之地了，useCallback 可以保证，无论 render 多少次，我们的函数都是同一个函数，减小不断创建的开销。