使用回调内联函数样式

Question

区别是什么：

第一个例子：

const onClose = useCallback(onModalClose, []);

第二个例子：

const onClose = useCallback(() => onModalClose, []);

onModalClose调用作为组件道具：

<CustomComponent
onModalClose={() => setDeleteModal(false)}
/>

当使用第二个例子时，linter会对我大喊大叫，因为deps数组是空的，onModalClose应该在deps数组中，这会导致多次重新渲染的问题。使用第一个示例不会导致重新渲染的问题，也不需要deps数组。

Answer 1

假设您在第二个例子中指的是const onClose = useCallback(() => onModalClose(), []);，唯一显著的区别是第二个被封装在内联函数中。

useCallback需要一个函数来记忆，这就是它的签名。在对函数onModalClose一无所知的情况下，linter在第一个示例中没有什么可抱怨的，因为您直接将函数作为回调来记忆。在第二个例子中，您声明了一个匿名函数，该函数调用另一个函数。linter看到并建议将It添加到依赖数组中的是这个函数调用。

根据onModalClose的定义位置，您可以安全地将其添加到依赖数组中(即，如果它在功能组件外部定义，则其引用是稳定的，并且在渲染之间不会更改(，或者您可以将依赖数组留空，可能需要将// eslint-disable-next-line react-hooks/exhaustive-deps添加到其上方的行中，以便linter停止"对您大喊大叫"。

const onClose = useCallback(onModalClose, []);

或

const onClose = useCallback(
() => onModalClose(),
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);

在这两者之间，我更喜欢第一种，因为很明显，你正在记忆函数回调和需要更少的文本(即，不需要提供esint覆盖。