Reactjs useCallback和useMemo有什么区别

也许我误解了什么，但每次重新渲染时都会运行useCallback钩子

我将输入作为useCallback的第二个参数传递给了useCallback，这是一个不可更改的常量，但返回的记忆回调仍然在每次渲染时运行我昂贵的计算，我很确定，您可以在下面的代码段中自己检查

我已将useCallback更改为useMemo—useMemo的工作方式与预期相同—在传递的输入发生更改时运行。并且真正记住了昂贵的计算

实例：

"严格使用",； const{useState，useCallback，useMemo}=React； const neverChange='我从不改变'； 常数1秒=1000； 功能应用程序{ const[second，setSecond]=useState0； //此UseMoom旨在运行函数，并在组件呈现时返回一个值，假设其中一个依赖项已更改。useCallback旨在在呈现时返回一个已记忆的函数，但实际上尚未调用该函数；通常您只需将此函数传递给onClick参数或类似参数。

如果调用正确，您可以互换使用它们，例如，让UseMoom返回一个函数相当于useCallback，或者使用useCallback然后调用返回的函数类似于UseMoo，UseMoom使函数仅在输入更改时运行。否则，它将返回memoizedcached结果。建议只使用我们涉及复杂计算的函数的eMemo由于运行USEMO会带来成本，因此时间复杂度更高

useCallback可防止函数的新实例我的意思是在每个重新渲染器上重新定义函数，从而防止子组件重新渲染如果我们将函数作为道具传递给它们

现在是2020年5月25日，useCallback和UseMoom可以互换使用：

const fn = () => { function code }

const fn1 = React.useCallback(fn, deps)
const fn2 = React.useMemo(() => fn, deps)

在这两种情况下，fn1和fn2都保存在不同的渲染之间。 不同之处在于useCallback将来可能会得到改进，它总是返回相同的函数，并将其中继到传递给它的最后一个函数

---

在您的示例中，useCallback中的函数expensiveCalc将在每个渲染上运行，因为您在每个渲染上直接调用useCallback下面的记忆函数

useCallback将记忆并返回实际函数，因此即使该函数已记忆，只要调用它，它仍将运行

在本例中，这基本上就是正在发生的情况：

const calcCallback=>expensiveCalc'useCallback'； const computedCallback=calcCallback； 在您的情况下，不应使用useCallback

如果可能，将昂贵的函数移到react组件之外，并在外部执行它。 e、 g:

const calcResult=expensiveCalc'useCallback'； 功能应用程序{ 如果由于某种原因，这是不可能的，这就是useMemo适合的地方

useMemo将记忆从函数返回的值，并在呈现之间保留该值，直到依赖项发生更改

这意味着，如果您不想在每个渲染上运行昂贵的函数，而只需要该值，则可以将其移出react组件的范围，或者使用useMemo

有关这两个挂钩的更多详细信息，请阅读本文：