reactjs - 我应该在自定义钩子中记住函数吗？

Question

我有计数器组件。我用自定义钩子封装了业务逻辑。我应该通过手段优化功能useCallback吗？如果有input onchange handler，情况会不会一样？

const increment = () => {
    setCount(count + 1);
};

↓</p>

const increment = useCallback(() => {
    setCount(count + 1);
}, [count]);

沙

Answer 1

在功能组件范围内声明的每个函数都应该是memoized或cachedwith useCallback。如果它引用组件范围内的其他变量或函数，它应该在其dependency list. 否则，每次prop/state更改都将重新创建一个很少使用的功能。

但请记住在优化之前进行测量。- 即使是官方文档也说要轻松。

Answer 2

假设 count 和 setCount 来自const [count,setCount] = useState(0)then 您应该按以下方式使用回调，以便在组件的生命周期中递增函数保持不变：

const increment = useCallback(() => setCount(count => count + 1),[]);

当计数更改时，您不需要重新创建增量，因为您可以将回调传递给状态设置器函数。