useCallback与useMemo以及何时使用它们

Question

useCallback和之间的主要区别是useMemo什么？以及何时使用useCallbackReact Hooks？

Answer 1

useMemo(() => (bar) => foo + bar, [foo]);

与 useCallback 等效的代码：

useCallback((bar) => foo + bar, [foo]);

使用回调只是与函数一起使用的简写变体。useMemo

这就是它存在的原因：当您使用时useMemo，该值通常会在其依赖项之一发生变化时发生变化。例如：

const fullName = useMemo(() => firstName + lastName, [firstName, lastName]);

如果firstName或lastName改变，fullName也会改变。另一方面，函数本身通常不需要重新计算，它们的依赖项大多是可能改变的闭包值。

const getFullName = useCallback(() => firstName + lastName, [firstName, lastName]);

在这里，当firstName或lastName更改时，我们不需要具有不同主体的完全不同的函数，但我们确实需要具有同一函数的新实例，以便它在闭包（依赖项）中具有最新的值。所以 React 团队只是为了方便才添加它，因为它是一个常见的用例，而且() => () =>语法有点难看。

Answer 2

useMemo两者useCallback都使用了一种叫做记忆的东西，你可以把它想象成钩子正在记住一些东西。

差异：

useMemo将记住/记住从您传递给它的函数返回的值，直到依赖项发生变化。

const num = 10
const result = useMemo(() => num + num, [num])
// result is now equal to 20

useCallback将记住/记住您传递给它的实际函数，直到依赖关系发生变化，这给您带来了称为引用相等的东西。

const num = 10
const result = useCallback(() => num + num, [num])
// result is now equal to () => num + num.
// result === result between renders.

引用相等性：

() => {} === () => {} // This is false

const a = () => {}
a === a // This is true

Answer 3

useMemo有助于防止重新渲染，除非对函数的依赖关系已更改，同时useCallback有助于防止重新渲染，除非函数已更改。即，当一个函数作为参数传递给另一个函数时，useCallback仅允许在传递不同的函数后重新渲染。这是可能有助于进一步解释的资源链接