ReactHooks学习笔记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 }  // 缓存按钮组件 const MemoriedComplexButton = React.memo(ComplexButton);  function Counter() {   const [count, setCount] = useState(0);    // 缓存函数   const onClick = useCallback(() => {     setCount(preCount => preCount + 1);   }, []);    return (            count { count }                ) }
　　这里需要注意的是，我们不能盲目使用  useCallback + React.memo  组合，需要权衡应用了 React.memo 组件的重新渲染成本，和使用 useCallback 导致的函数缓存和闭包陷阱之间的利弊再做决定。
　　只建议对复杂的组件进行缓存，并且需要注意是否有其他一定会改变的 prop 强制导致组件缓存失效，如果有的话，就别用了这个组合了，白折腾。 结尾
　　useCallback 能够在依赖项不改变的时候，返回上一次传入的回调函数。
　　光是使用 useCallback 对组件函数来说是负优化，因为我们每次渲染组件时函数声明依旧会触发，而且还会引入闭包的问题。
　　useCallback 的常见用途是搭配 React.memo()，解决传入新函数导致组件缓存失效的问题。