何時使用 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的觀點：從編寫你的函數開始，然后對你認為表現不佳的代碼進行優化。 （盡管在某些情況下，您可能會根據以前的經驗采取主動——例如，將一個回調傳遞給您可以記憶的幾百個純子組件……）