我应该在自定义挂钩中记住函数吗？

Question

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

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

↓

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

Answer 1

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

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

Answer 2

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

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

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

Should I memoize functions in custom hook?