useMemo 在 React 中的用例是什么?



我需要帮助来了解何时在 React 中使用useMemo钩子与useState+useEffect.根据我在阅读S.O.和网站上的其他问题后所理解的:

  • 使用useState,您可以创建一个值(可通过setter更改(,并且如果依赖项数组中列出的某些依赖项发生更改,您可以使用useEffect执行任何您需要的操作。例如,在第一次渲染时,您的组件将使用传递给useState的初始值进行渲染,然后效果将运行,并且您的组件将使用您在效果中使用setter设置的新值重新渲染。
  • 使用useMemo您可以创建一个值,该值
  • 将从您提供给钩子的函数计算出来,如果依赖项数组中的某些依赖项发生变化,该值将发生变化。到目前为止,对我来说,它看起来像useState+useEffect,除了你没有设置器来更改值。在渲染时,如果其中一个依赖项已更改,您的 useMemo 将运行。这里的区别:您的组件将在渲染之前等待计算值(不确定这部分(。

从我所读到的内容来看,useMemo应该用于重型操作。但是,如果它阻止了组件的渲染,那又有什么意义呢?
有人说使用依赖数组可以避免不必要的更新,但我也可以使用 useEffect 来做到这一点而不会阻止渲染?如果我没有要渲染的繁重组件,使用 useEffect 不是更快吗?

谢谢:)

编辑:
接受了菲利普费尔德曼的回答,因为它符合我的需求。正如评论中所建议的,您可以查看此问题以进行全局比较:)

你是对的,useEffect渲染后作为副作用运行。这意味着,当您不想阻塞渲染循环时,可以使用您的版本。

但是,该版本将通过调用setter触发另一个重新渲染。 绘制的初始时间可能会更快,但通过设置新值,您将立即再次阻止渲染循环,在大多数情况下,这应该比直接使用useMemo慢。

相关内容

  • 没有找到相关文章