使用 useCallback 记住一个闭包和渲染回调

Question

让我有一个 graphql 变异组件，我在很多地方重复使用它

const MarkAsViewed =({ type = 1, children }) => {
  const markAsViewed = (commitMutation) => (type) => {
    return commitMutation({
      variables: { type }
    });
  };

  return (
    <MarkAsViewedMutation
      mutation={MARK_AS_VIEWED_MUTATION}
      variables={{
        type,
      }}
    >
      {
        (commitMutation, { error, loading }) => children({
          markAsViewed: markAsViewed(commitMutation)
        })
      }
    </MarkAsViewedMutation>
  );
};

然而，由于 markAsViewed 是一个闭包函数，它总是 return 具有不同 ref 的不同函数，这意味着不同的反应。

这使得子组件必须执行 useCallback 如：

const alwaysSameRefFunc = useCallback(()=>{ markAsViewed(), []}

以上有效但产生了 2 个问题：

我收到 linter 警告说我应该添加 markAsViewed 作为依赖等等。我不能，因为它会触发无限循环（因为每次都是不同的 ref）
每个使用 <MarkAsViewed /> 组件的人都需要手动记忆

理想情况下这是我想要的，但它是无效代码，因为 "markAsViewed" 不是反应组件并且不能有 useCallback

const markAsViewed = (commitMutation) => useCallback((type) => {
    return commitMutation({
      variables: { type }
    });
  }, []);

知道如何解决这个问题吗？

注意：我们还没有准备好更新 Apollo 版本以获得 hoook

Answer 1

以下是否有效？

const markAsViewed = commitMutation => type => {
  return commitMutation({
    variables: { type },
  });
};
const MarkAsViewed = ({ type = 1, children }) => {
  const fn = useCallback(
    (commitMutation, { error, loading }) =>
      children({
        markAsViewed: markAsViewed(commitMutation),
      }),
    [children]
  );
  return (
    <MarkAsViewedMutation
      mutation={MARK_AS_VIEWED_MUTATION}
      variables={{
        type,
      }}
    >
      {fn}
    </MarkAsViewedMutation>
  );
};

我不确定这是否可行，因为它仍然取决于 children，如果这导致不必要的渲染，那么可能 post MarkAsViewed 组件的渲染方式。

使用 useCallback 记住一个闭包和渲染回调

memoized a closure and render callback with useCallback

apollo

reactjs

graphql