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

Question

我需要演示如何使用React。我的工作代码如下所示，可以实现我想要的结果：

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

我找到了一个链接，它表明我可以更多地使用这样的语法，但我无法准确地理解它。

据我所知：

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

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

Answer 1

React.memo和React.useMemo根本不等同(不要依赖命名相似性)。这是React.memo 文档的引语

React.memo是高阶分量。

因此，这是一种特殊的方法，它可以优化组件的呈现，因为它使用相同的属性呈现相同的输出。

另一方面，React.useMemo更通用，返回回传值。更通用。

传递一个“create”函数和一个依赖项数组。useMemo只在依赖项( a或b)发生变化时才重新计算回忆录值。

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

虽然它可以被黑客攻击来代替React.memo，但这并不是它的目的，它会给混乱带来更多的麻烦而不是帮助。useMemo是一个钩子，受某些使用规则约束。

还有这样的警告：

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

Answer 2

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

对于上下文，HOC是一种较老的反应模式，多年来一直用于基于类的组件和功能组件。您现在仍然可以使用它(没有反对意见的计划)。

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

无论如何，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是一个临时的(并且可以用于包装类和函数组件)，useMemo是一个钩子(并且只能在功能组件中使用)。

Answer 3

React.memo 诉 useMemo / TLDR:综述

React.memo是一个高阶组件(简称为自定义组件)，它将基于道具记忆一个反应组件。

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是一个function钩子，它将回溯从您提供的函数中返回的值。

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

来源