使用 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)
  }, []
)