javascript - 何时使用 useMemo 和 useCallback 进行性能优化？

Question

考虑我有这样的例子:

import React, { useMemo, useCallback } from 'react'

const Hello = (props) => {
  const { firstName, lastName } = props
  const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName])

  const sayHello = useCallback(() => {
    console.log(`Hello, ${fullName}`)
  }, [fullName])

  return (
    // ...
  )
}

export default Hello

基本上我有一个名为 Hello 的组件，它接收两个 Prop firstName 和 lastName，然后我需要计算 fullName 基于这两个 props 并有一个函数 sayHello() 使用 fullName 来做某事

所以我的问题是:这里有必要使用useMemo()和useCallback()来进行性能优化吗？似乎过度使用 useMemo() 和 useCallback() 只是为了一点好处，我不确定这是否会导致潜在的副作用？

Answer 1

在该示例中，使用 useMemo 和使用 useCallback 的不同答案:

• useMemo 几乎可以肯定是矫枉过正； sayHello 构建该字符串的成本并不高(与创建一个新函数在每次渲染时传递给 useMemo 相比)。

• useCallback 的答案取决于 sayHello 的使用方式。如果将 sayHello 作为 prop 提供给在该 prop 上内存的组件(例如 PureComponent ，直接实现 shouldComponentUpdate 的东西，或者使用 React.memo 包装组件的结果) ，它可以是一种性能优化，可以通过如您所示记住它来保持 sayHello 稳定，以便您将其传递到的组件在发生变化时不必重新渲染。但如果没有，它可能没有用，不是。

我同意Drew Reese :从简单地开始编写函数，然后对您发现性能不佳的代码进行优化。 (尽管在某些情况下，您可能会根据以前的经验采取主动行动 - 例如，将您可以记住的回调传递给数百个纯子组件......)