React中useMemo的用例是什么?

时间:2019-12-18 16:58:46

标签: reactjs react-hooks

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

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

根据我的阅读,useMemo应该用于繁重的操作。但是,如果它阻碍了组件的渲染,那有什么意义呢?
有人说,使用依赖项数组可以避免不必要的更新,但是我也可以使用useEffect进行操作而不会阻止渲染?如果我没有很重的渲染组件,使用useEffect会更快吗?

谢谢:)

编辑:
我接受了Philip Feldmann的回答,因为它符合我的需求。如评论中所建议,您可以查看this question进行全局比较:)

1 个答案:

答案 0 :(得分:0)

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

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