时间戳

首页 > 解决方案 > 使用 useMemo 代替 React.memo 语法问题

reactjs - 使用 useMemo 代替 React.memo 语法问题

问题描述

我需要演示如何使用 React Hooks useMemo。我有如下工作代码，可以满足我的要求：

const SpeakerCardDetail = React.memo(
  ({id,...

我找到了一个链接，表明我可以使用更像这样的语法，但我无法完全弄清楚。

据我所知：

const SpeakerDetail = React.useMemo(() => {
   ({ id,

显然不是。我确实知道 React.memo 解决了这个问题，但我确实需要展示 useMemo 的实际效果，并希望有一种可以使用的替代语法。

标签： reactjsreact-hooks

解决方案

React.memo并且React.useMemo根本不等效（不要依赖命名相似性）。React.memo 这是来自doc的引用：

React.memo是一个高阶组件。

所以它是一个 HOC 可以优化你的组件的呈现，因为它使用相同的属性呈现相同的输出。

React.useMemo另一方面更通用并返回一个记忆值：

传递一个“create”函数和一个依赖数组。仅当依赖项之一（或）发生更改useMemo时，才会重新计算记忆值。ab

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b), 
  [a, b]
);

虽然它可以被黑客用来代替React.memo，但这不是它的目的，它只会增加混乱而不是帮助。useMemo是一个钩子，受一定的使用规则约束。

还有这个警告：

将来，React 可能会选择“忘记”一些先前记忆的值，并在下一次渲染时重新计算它们，例如为屏幕外组件释放内存。编写你的代码，让它在没有的情况下仍然可以工作 useMemo——然后添加它以优化性能。

推荐阅读