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

Question

我需要演示如何使用React Hooks useMemo。我的工作代码如下，可以实现我想要的功能:

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

我找到了link这表明我可以使用更像这样的语法，但我无法准确地弄清楚它。

据我所知:

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

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

Answer 1

React.memo 和 React.useMemo 根本不等同(不要依赖命名相似性)。这是来自 React.memo doc 的引用:

React.memo is a higher order component.

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

另一方面，

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

Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies (either a or b) has changed.

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

虽然它可以被黑客用来代替 React.memo，但这不是它的目的，它只会增加困惑而不是有帮助。 useMemo 是一个钩子(Hook)，受 certain usage rules 的约束。 。

还有这个警告:

In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.