官方文档：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 (
<>
<ChildrenApp num={num} num1={num1} callback={mCallback} />
<button onClick={() => setNum([7,8,9])} >change num</button>
<button onClick={() => setNum1([10,11,12])} >change num1</button>
</>
)
}
function ChildrenApp({num, num1, callback}) {
set.add(callback);
console.log(set);
return (
<div>
{num} - {num1} - {callback()}
</div>
)
}
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 会被重新赋值，这个流程会触发生成一个新的函数。
网友评论