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

Question

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

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

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

据我所知：

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

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

Answer 1

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

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

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

总之，无论是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需要一个比较之前和当前 props 的函数，就像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用来memoize的一个功能，唯一的区别是的结果memo是一个HOC（并且可以被用来包裹既类和功能部件），其useMemo是一个钩（并且只能内部功能组件使用）。

Answer 2

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，然后添加代码 以优化性能。

Answer 3

总结一下React.memovs useMemo/ TLDR：

React.memo是一个高阶组件（简称 HOC），它将根据 props 记忆 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>
}

来源