Javascript 使用useCallback钩子的正确方法是什么？

我有一个自定义输入组件，如下所示：

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}/>
  )
}

现在根据doc实施，正确的方法应该是：

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

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

---

但是这会使

useCallback

的使用变得毫无价值，因为

handleChange

每次

值

状态更新时都会开始获得一个新的func引用，这将导致不必要的重新加载我的

组件。我的实现不正确吗？

您应该包括创建函数所需的所有内容，调用函数时，

值作为正常参数传递

在这种情况下，构建函数所需的唯一依赖项是
setValue
：

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

但是，由于已知
setState
、
dispatch
（来自
useReducer
）和
useRef
是静态的，因此可以从依赖项列表中忽略它们。具有一个函数，该函数将查找并“批准”此函数作为静态函数。因此，您的代码应该是：

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

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

我假设你的意思是
setValue
，而不是
setState
。但是，可以跳过设置值，同时linter不会对此发出警告。此外，即使传递setValue也没有意义？linter应该警告
setValue
，因为如果它改变，函数将重新生成。但是，它没有。即使在doc示例中，如果您看到，它们也没有将doSomething作为依赖项传递：/