使用 useCallback 鈎子的正確方法是什么？

Question

我有一個自定義輸入組件，如下所示：

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

function MyCustomInput ({value: initialValue = '0'}) {
  const [value, setValue] = useState(initialValue)

  const handleChange = useCallback(
    value => {
     setValue(value)
    },
    [setValue]
  )

  return (
    <SomeInputComponent onChange={handleChange}/>
  )
}

React文檔中的 useCallback 實現說：

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b]
)

現在根據文檔實現，正確的方法應該是：

const handleChange = useCallback(
   value => {
     setValue(value)
   },
   [value] // And not, [setValue]
 )

但這會使useCallback的使用useCallback毫無價值，因為每次value狀態更新時， handleChange都會開始獲取新的 func 引用，這將導致我的<SomeInputComponent>組件不必要地重新渲染。 我的實現不正確嗎？

Answer 1

您應該包含創建函數所需的所有內容，該value在調用函數時作為普通參數傳遞。

在這種情況下，構建函數所需的唯一依賴項是setValue ：

const handleChange = useCallback(
  value => {
    setValue(value)
  }, [setValue]
)

但是，由於setState 、 dispatch （來自useReducer ）和useRef已知是靜態的，因此您可以從依賴項列表中省略它們。 isDefinitelyStaticDependency(reference) -deps 規則有一個函數isDefinitelyStaticDependency(reference)來查找和“批准”這個函數是靜態的。 所以你的代碼應該是：

const handleChange = useCallback(
  value => {
    setValue(value)
  }, []
)