什么时候使用 useMemo 和 useCallback 来进行性能优化？

When to use useMemo and useCallback for performance optimization?

考虑一下我有这样的例子：

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 的组件，它接收两个道具 firstName 和 lastName，然后我需要根据这两个道具计算 fullName 和有一个函数 sayHello() 使用 fullName 做某事

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

在那个例子中，使用 useMemo 和使用 useCallback 的不同答案：

useMemo 几乎可以肯定是矫枉过正； sayHello 构建该字符串并没有那么昂贵（相对于创建一个新函数以在每次渲染时传递给 useMemo）。
useCallback 的答案取决于 sayHello 的使用方式。如果 sayHello 作为 prop 提供给在该 prop 上记忆的组件（如 PureComponent, something that implements shouldComponentUpdate directly, or the result of wrapping a component with React.memo），它可以是一种性能优化，通过在你记忆时保持 sayHello 稳定'已经显示，因此您将其传递给的组件在更改时不必重新渲染。但是，如果没有，它可能没有用，不。

我同意：从编写您的函数开始，然后对您发现性能不佳的代码应用优化。（尽管在某些情况下，您可能会根据以前的经验主动采取行动——例如，将回调传递给数百个纯子组件...）