我有一个自定义输入组件,如下所示:
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]
)
但是,由于已知setState
、dispatch
(来自useReducer
(和useRef
是静态的,因此您可以从依赖项列表中省略它们。穷举 deps 规则有一个函数isDefinitelyStaticDependency(reference)
,该函数查找并"批准"此函数为静态函数。所以你的代码应该是:
const handleChange = useCallback(
value => {
setValue(value)
}, []
)