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

Question

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

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

我找到了一个链接，该链接显示我可以更像这样使用语法，但是我无法确切地知道它。

据我所知：

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

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

Answer 1

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

React.memo是高阶成分。

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

React.useMemo另一方面，它更通用，并返回一个备注值：

传递“创建”函数和一系列依赖项。useMemo仅在其中一个依赖项（a或b）已更改时才重新计算存储的值。

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

尽管可以骇人使用React.memo它而不是使用它，但这并不是其目的，它会使混乱更加严重。useMemo是一个钩子，必须遵守某些使用规则。

还有这个警告：

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