将React.useCallback与Redux动作创建者结合

时间:2019-06-24 10:55:53

标签: reactjs redux eslint react-hooks

我将一些常规组件改写为功能组件,因为我喜欢使用新的useContext钩子传递道具(主要是应在嵌套子组件中使用的功能),但是,这会导致一些不必要的重新渲染和我试图通过用useCallback钩包装一些函数来防止这些情况。我真的很喜欢这个主意,但是在我的某些函数中,我使用了存储在道具中的其他函数(例如redux动作创建者)。让我们以以下代码为例:

const deleteNode = useCallback((node) => {
    if (currentNodeEditing && currentNodeEditing.id === node.id) {
      props.closeSideMenu(sideMenuType.editNode);
    }

    props.deleteNode(node.questionnaire, node);
  }, [currentNodeEditing]);

在此功能中,props.deleteNodeprops.closeSideMenu是Redux Action Creators。我正在使用eslint规则"react-hooks/exhaustive-deps",这向我发出警告,指出useCallback挂钩中缺少props依赖项。但是,如果我要传递props属性,则每次props更改时都会重新创建我的函数。我的closeSideMenudeleteNode函数永远不会更改,因为它是Redux动作的创建者。

用useCallback包装此函数的最佳方法是什么?我应该只将props作为useCallback钩子的参数传递,我可以忽略掉lint错误,还是应该分解props(我宁愿不这样做)?

0 个答案:

没有答案