我应该记住自定义钩子中的函数吗？

2024-05-21 • 问答

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

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

↓

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

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

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

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

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

但是请记住在优化之前先进行测量。 -甚至官方文档都说很容易做到这一点。