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

React 文档中的 useCallback 实现说:

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

现在根据文档实现,正确的方法应该是:

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

但这会使使用useCallback毫无价值,因为每次value状态更新时handleChange都会开始获得新的 func 引用,这将导致不必要地重新渲染我的<SomeInputComponent>组件。我的实现不正确吗?

您应该包含创建函数所需的一切,当调用函数时,value作为普通参数传递。

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

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

但是,由于已知setStatedispatch(来自useReducer(和useRef是静态的,因此您可以从依赖项列表中省略它们。穷举 deps 规则有一个函数isDefinitelyStaticDependency(reference),该函数查找并"批准"此函数为静态函数。所以你的代码应该是:

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

相关内容

  • 没有找到相关文章

最新更新