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

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

Answer 1

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

• useMemo几乎可以肯定是矫枉过正。 sayHello构建该字符串并没有那么昂贵（与创建一个新的 function 以在每次渲染时传递给useMemo ）。

• useCallback的答案取决于sayHello的使用方式。 如果sayHello作为 prop 提供给在该 prop 上记忆的组件（例如PureComponent ，直接实现shouldComponentUpdate的东西，或者用React.memo包装组件的结果），它可以是保持sayHello稳定的性能优化通过记忆它，就像你展示的那样，你传递给它的组件在它发生变化时不必重新渲染。 但是，如果没有，它可能没有用，不。

我同意Drew Reese的观点：从编写你的函数开始，然后对你认为表现不佳的代码进行优化。 （尽管在某些情况下，您可能会根据以前的经验采取主动——例如，将一个回调传递给您可以记忆的几百个纯子组件……）