Question

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

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

我发现一个link表明我可以更像这样使用语法，但是我无法确切地弄清楚。

据我所知：

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

显然不是。我确实知道React.memo可以解决问题，但是我确实需要展示useMemo的使用情况，并希望可以使用其他语法。

Answer 1

虽然memo是HOC，而useMemo是一个钩子，但是您可以使用它们来实现相同的结果。

就上下文而言，HOC是一种较旧的React模式，多年来已与基于类和功能的组件一起使用。您今天仍然可以使用它（没有计划弃用）。

挂钩是一个相对较新的概念（大约一年），它增强了功能组件，在许多情况下，simplifies code大大增加了。这就是为什么许多开发人员正在转向使用钩子的原因。

无论如何，memo和useMemo都接受两个参数：函数和道具。如果在随后的重新渲染中所有道具均未更改，则不会再次执行该函数，而是返回先前的结果。实际上，这是用一种纯粹的功能性方法代替了shouldComponentUpdate回调。

使用memo，您的代码应如下所示：

const SpeakerCardDetail = React.memo(
  (props) => <div>{props.name}</div>
)

使用useMemo，您将写：

const SpeakerCardDetail = (props) => useMemo(() => <div>{props.name}</div>)

请注意，useMemo用于组件函数内部，而memo用于包装函数。

更传统地，useMemo可以写为：

function SpeakerCardDetail(props) {
  return useMemo(
    () => <div>{props.name}</div>
  )
}

现在，上面的代码每次都会重新渲染，从而使useMemo函数变得毫无用处。为了使其发挥作用，我们需要添加第二个参数。（memo即使不指定第二个参数仍然可以使用，但是您可以添加它以自定义它）

第二个参数的格式略有不同。 memo需要一个比较先前道具和当前道具的函数，就像shouldComponentUpdate对类组件所做的一样。

const SpeakerCardDetail = React.memo(
  (props) => <div>{props.name}</div>
,
  // return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false
  (prevProps, nextProps) => prevProps.name === nextProps.name
)

另一方面，

useMemo期望将数组作为第二个参数。每当数组中的值更改时，该函数就会再次执行。

function SpeakerCardDetail(props) {
  return useMemo(
    () => <div>{props.name}</div>
  ,
    [props.name]
  )
}

真的没有比这更神奇的了。 memo和useMemo均用于记忆函数的结果，唯一的区别是memo是一个{{的HOC（可用于包装类和函数组件） 1}}是一个钩子（只能在功能组件内部使用）。

Answer 2

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

React.memo是higher order component。

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

另一方面，

React.useMemo更通用，returns a memoized value：

传递“创建”函数和一系列依赖项。 useMemo将仅当其中一个依赖项（a或b）具有以下项时才重新计算存储的值改变了。

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

虽然可以被黑客入侵而不是React.memo来使用，但这并不是它的目的，它会给混乱带来更多的帮助。 useMemo是一个钩子，受certain usage rules的约束。

也有此警告：

将来，React可能会选择“忘记”以前记住的一些内容值并在下一次渲染时重新计算它们，例如为...释放内存屏幕外组件。编写您的代码，使其仍然可以在没有 useMemo-然后添加它以优化性能。

Answer 3

我刚刚整理了一篇有关the differences between React.memo vs useMemo which you can find here的文章

总结一下/ tldr：

React.memo 是一个高阶组件（简称HOC），它将根据道具记忆一个react组件。

export function SomeComponent({ num }) {
  return <p>{num * 10}</p>
}

export default React.memo(SomeComponent, function areEqual(
  prevProps,
  nextProps
) {
  if (prevProps.num !== nextProps.num) {
    return false
  }
  return true
})

useMemo 是一个反应挂钩，它将记住从您提供的函数返回的值。

export function SomeComponent({ num }) {
  const res = useMemo(() => num * 10, [num])
  return <p>{res}</p>
}

来源：https://atomizedobjects.com/blog/react/react-memo-vs-use-memo/

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

3 个答案: