javascript - React Hooks - 无需调用即可内存函数

Question

我有一个以下函数来控制我的模态:

const getModalProps = useCallback(
(id) => ({
  onClose: () => handleClose(id),
  onOpen: () => handleOpen(id),
  isOpen: isOpen(id),
}),
[handleClose, handleOpen, isOpen],
);

这个想法是使用像<Modal {...getModalProps('userModal')} />这样的东西。当我想按以下方式使用它时，问题就来了:

const modalProps = getModalProps('userModal');

useEffect(() => { modalProps.onOpen() }, [modalProps.onOpen])

这会导致无限循环，因为 modalProps.onOpen实际上是一个匿名箭头函数，而不是 useCallback 内存函数。

我不知道如何使用 getModalProps返回已内存但未调用 handleOpen 的函数和handleClose .

类似的想法(我知道这行不通，只是一个概念):

const getModalProps = useCallback(
(id) => ({
  onClose: memoise(() => handleClose(id)),
  onOpen: memoise(() => handleOpen(id)),
  isOpen: isOpen(id),
}),
[handleClose, handleOpen, isOpen],
);

handleClose和handleOpen只是你的正常useCallback功能。

如果需要更多信息，请发表评论。

Answer 1

创建一个自定义 Hook ，用于创建记忆化的 onClose 和 onOpen，并返回 modalProps 对象:

const useGetModalProps = id => { // you can also pass isOpen to the hook
  const onClose = useCallback(() => handleClose(id), [handleClose, id]);
  const onOpen = useCallback(() => handleOpen(id), [handleOpen, id]);

  return {
    onClose,
    onOpen,
    isOpen: isOpen(id),
  };
}

用法:

const modalProps = useGetModalProps('userModal');

useEffect(() => { modalProps.onOpen() }, [modalProps.onOpen])

或者

<Modal {...modalProps } />