useCallback内联函数样式

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查看并建议将其添加到依赖数组中。

根据定义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
  [],
);

在两者之间，我更喜欢第一个，因为很明显，您正在回溯函数回调，并且需要更少的文本(即不需要提供一个eslint覆盖。