[React Hooks] useCallback 学习

官方文档：https://reactjs.org/docs/hooks-reference.html#usecallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback 接收一个内联回调函数和一个依赖数组，返回一个记忆版本的回调函数，只有当依赖发生变化的时候，回调函数才会改变。这在将回调传递给优化的子组件时非常有用，这些组件依赖引用相等性来防止不必要的渲染（引用没有发生变化）

所以我们这里将带着一个问题阅读下面的内容：当依赖发生改变的时候，变量 memoizedCallback 的引用会发生变化吗？

---

下面给个代码例子：

import React, { useState, useCallback } from 'react';

const set = new Set();

function App() {

    const [num, setNum] = useState([1,2,3]);
    const [num1, setNum1] = useState([4,5,6]);

    const mCallback = useCallback(() => { console.log('callback function');return [...num, ...num1] }, []);

    return (
        <>
            
             setNum([7,8,9])} >change num
             setNum1([10,11,12])} >change num1
        
    )
}

function ChildrenApp({num, num1, callback}) {

    set.add(callback);

    console.log(set);

    return (
        

            {num} - {num1} - {callback()}
        
    )
}

export default App;

• 初始化加载后
  如图，初始化加载后num和num1显示分别为 123 和 456，callback 函数显示结果为 123456。set 集合里面只有一个 callback 函数，callback 函数被调用，打印信息 callback function
  
  

• 点击 change num，num 变为 789，页面以及console 显示如下图：

  
  
  

• 点击 change num1 后，如下图：

  
  
  

从上面的过程我们可以发现，set 集合里面一直只有一个函数，这说明了 callback 函数的引用没有发生变化，使用的是记忆化的版本函数。这里之所以 callback 显示的值一直是 123456 没有变化，原因在于 mCallback 函数的依赖列表为空，并没有监听 num 和 num1 的变化，所以其闭包里面的 num 和 num1 值一直分别是 123 和 456。

---

下面我们做点变化，修改下 mCallback 函数内容如下：

const mCallback = () => [...num, ...num1];

• 初始化加载

  
  
  

• 点击 change num

  
  
  

• 点击 change num1

  
  
  

整个流程下来，我们可以看到 set 里面包含了三个 function，说明了每次重新渲染的时候都会重新生成 mCallback 函数并传递给子组件。

---

下面我们再修改修改 mCallback 函数，给它添加上依赖列表，代码如下：

const mCallback = useCallback(() => { console.log('callback function');return num }, [num]);

• 初始化过程

  
  
  

• 点击 change num

  
  
  
  
  

  这次我们在依赖列表里面监听了 num ，所以当 num 发生变化的时候，mCallback 函数会重新生成，所以 set 里面便有了两个函数。

• 点击 change num1

  
  
  
  
  

  当我们点击 change num1 的时候，set 里面依然是两个函数。因为我们在依赖列表里面没有监听 num1，所以即使 num1 发生了变化，mCallback函数也不会重新生成，而是继续使用记忆化的历史版本。

---

总结：

• 普通函数在重新渲染时会重新生成，所以引用会变。
• 使用 useCallback 包装的函数，依赖列表为空时，重新渲染时该函数会使用记忆化的版本函数，所以引用不会变化
• 使用 useCallback 包装的函数，依赖列表存在依赖，重新渲染时对应的依赖发生变化，该函数会重新生成，所以引用发生变化，

---

这里就完了吗？不，还有一个问题。为什么依赖发生变化的时候需要重新生成函数那？这里面和作用域的知识有点相关。

• 首先我们看看普通函数
  ChildrenApp 的 callback 函数其实是指向 App 的 mCallback 函数的，即 callback -> mCallback，所以调用 callback 函数也就是调用 mCallback 函数，里面用到的 num 和 num1 是 App 组件作用域里面的 num 和 num1。
• 再来看看依赖为空的情况
  和上面一样，ChildrenApp 的 callback 函数其实是指向 App 的 mCallback 函数的，即 callback -> mCallback，但是我们这里的 mCallback 函数是一个记忆化版本函数，在初始化的时候，App 作用域下的 num 和 num1 传给 mCallback 函数闭包环境里面的 num 和 num1。因为我们的依赖列表为空，不监听变化，所以闭包里面的内容不会发生变化。所以 mCallback 函数也就没有重新生成。
• 最后看看有依赖的情况
  和依赖为空的差别在于，例如当依赖 num 发生变化的时候，mCallback 闭包环境里对应的 num 会被重新赋值，这个流程会触发生成一个新的函数。