【问题标题】:What is the use case of useMemo in React?React 中 useMemo 的用例是什么?
【发布时间】:2020-04-11 06:58:48
【问题描述】:

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

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

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

谢谢你:)

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

【问题讨论】:

  • useMemo 通过将返回值包装在依赖性检查层中来防止对昂贵数据进行不必要的重新处理。直到其中一个部门发生更改,该值才会跨渲染重新处理(类似于useCallback)。见memoization
  • 是的,但是否也没有对 useEffect 的依赖性检查?
  • 我认为它很好地比较了可能性。我不认为它是重复的。我会接受菲利普费尔德曼的回答。谢谢你的时间:)

标签: reactjs react-hooks


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2021-05-31
    • 1970-01-01
    • 1970-01-01
    • 2019-08-20
    • 2019-11-23
    • 1970-01-01
    • 2015-12-21
    • 1970-01-01
    • 2022-12-18
    相关资源
    最近更新 更多