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 doc中的useCallback实现说：

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

现在按照文档实现，正确的方法应该是：

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

但是，这将使useCallback的使用毫无价值，因为每次handleChange状态更新时，value都会开始获得新的func引用，这将导致不必要的{{ 1}}组件。我的实现不正确吗？

Answer 1

您应该包括创建函数所需的所有内容，在调用函数时，value作为常规参数传递。

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

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

但是，由于setState，dispatch（来自useReducer）和useRef是静态的，因此可以从依赖项列表中省略它们。 exhaustive-deps rule具有函数isDefinitelyStaticDependency(reference)，该函数查找并“批准”该函数为静态函数。因此您的代码应为：

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

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

1 个答案: