大家好，我是前端西瓜哥，今天学 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()，解决传入新函数导致组件缓存失效的问题。
