【React Hooks 学习笔记】useCallback

大家好，我是前端西瓜哥，今天学 useCallback。

useCallback 用于 缓存函数。它接受一个回调函数，和一个依赖项。

在组件第一次渲染时，useCallback 将传入的回调函数缓存起来。后面重新渲染时，如果依赖项没有发生更新，useCallback 会返回缓存的函数；如果依赖项更新了，就更新缓存。

const memoriedFn = useCallback(() => { console.log('我被缓存了') }, []);

只有 useCallback：负优化

每次重新渲染时，函数组件中函数的声明依旧无法跳过，而造成消耗。

然后被声明的函数被传入到 useCallback 中，可能会用到，可能会被丢掉，得看依赖项是否被改动过。

使用缓存函数还会有一个问题：闭包陷阱。假如你这样写：

const [count, setCount] = useState(0);
const onClick = useCallback(() => {
  setCount(count + 1);
}, []);

那这里的 count 永远只能加一次。因为 onClick 永远指向组件第一次渲染时生成的函数，这个函数所在的闭包的 count 变量永远是 0。

对此，需要改写为：

const onClickA = useCallback(() => {
  setCount(preCount => preCount + 1);
}, []);

一套流程下来就是：使用了 useCallback，除了声明的函数，还要额外缓存一个函数，还会有闭包的陷阱。

所以说，只是简单使用 useCallback，带来的是负优化。

我们需要一个好兄弟帮帮忙：React.memo()

经典搭配：useCallback + React.memo

React.memo() 是一个接收组件参数，然后返回新组件的函数，符合这种定义的函数被称为 高阶组件（但其实是个函数）。

React.memo 也用于缓存，但和 useCallback 缓存函数不同，它缓存的是组件。React.memo 会将传入的 props 和上一次的 props 进行对比。如果相同，直接使用最近一次渲染结果；否则重新渲染。对比使用的 Object.is 方法。

如果父元素是个函数组件，它重新渲染传给子组件的内部函数其实是一个新函数，这会让使用了 React.memo 优化的组件失去缓存效果。

这时候，useCallback 就有勇武之地了，因为它可以缓存函数，这样就能保证新一轮渲染传入的函数还是原来的函数，能够触发 React.memo 的缓存。

function ComplexButton(props) {
  // 假装是个复杂组件
  return <button onClick={props.onClick}>Button</button>
}
// 缓存按钮组件
const MemoriedComplexButton = React.memo(ComplexButton);
function Counter() {
  const [count, setCount] = useState(0);
  // 缓存函数
  const onClick = useCallback(() => {
    setCount(preCount => preCount + 1);
  }, []);
  return (
    <div>
      <div>count { count }</div>
      <MemoriedComplexButton onClick={onClick} />
    </div> 
  )
}

这里需要注意的是，我们不能盲目使用 useCallback + React.memo 组合，需要权衡应用了 React.memo 组件的重新渲染成本，和使用 useCallback 导致的函数缓存和闭包陷阱之间的利弊再做决定。

只建议对复杂的组件进行缓存，并且需要注意是否有其他一定会改变的 prop 强制导致组件缓存失效，如果有的话，就别用了这个组合了，白折腾。

结尾

useCallback 能够在依赖项不改变的时候，返回上一次传入的回调函数。

光是使用 useCallback 对组件函数来说是负优化，因为我们每次渲染组件时函数声明依旧会触发，而且还会引入闭包的问题。

useCallback 的常见用途是搭配 React.memo()，解决传入新函数导致组件缓存失效的问题。