React hook useCallback 如何识别函数？

Question

我正在学习 React hooks，我有一个关于

useCallback

钩子的问题。

据我了解，

useCallback

对于创建要在组件重新渲染时缓存和重用的函数非常有用（而不是在每次重新渲染时再次创建函数）。当您想要将函数作为 prop 传递给子组件而不导致子组件每次父组件重新渲染时都重新渲染时，这非常有用。

如果这是正确的，那么这就是我的问题：

这种情况下会发生什么：

const handlerFunction = useCallback(() => console.log('I am memoized'), []);

const handlerFunction2 = useCallback(() => console.log('I am memoized'), []);

在第二次调用

useCallback()

时，它会识别与第一次调用相同的函数并返回记忆的函数吗？

如果不是，它如何在重新渲染时将传递给

useCallback()

的函数与缓存中的记忆函数进行比较？

Answer 1

在第二次调用 useCallback() 时，它会识别与第一次调用相同的函数并返回记忆的函数吗？

没有。

如果不是，它如何在重新渲染时将传递给 useCallback() 的函数与缓存中的记忆函数进行比较？

挂钩的设计假设您始终以相同的顺序调用相同数量的挂钩。这被称为“钩子规则”。因为 React 可以假设您遵循 hooks 规则，所以它只需要跟踪顺序即可。 React 保留一个内部数组来跟踪钩子所需的数据。每次组件渲染时，react 都会将内部索引设置为 0。第一次调用

useCallback

，react 会将所需的任何数据保存在索引 0 中。然后再次调用

useCallback

，必要的数据会保存在索引中1. 组件下次渲染时，索引再次从0开始计数。您对

useCallback

的第一次调用与索引 0 中的数据进行交互，如果合适的话，返回保存的函数。然后，您对

useCallback

的第二次调用将与索引 1 中的数据进行交互。