useCallback 用于合并批量 redux 操作的函数（来自 HOC）。我应该在依赖数组中放入什么？

Question

我有这个组件

import React from 'react';
import { batch } from 'react-redux';  
  
const ContextMenu = ({
      menuData,
      isOpen,
      changeIsMenuOpen,
      changeAssetType,
    }) => {
      return (
        <ClickAwayListener
          onClickAway={() => {
            batch(() => {
              changeIsMenuOpen(false);
              changeAssetType(null);
            });
          }}
        >
          <ContextMenu
            open={isOpen}
            menuData={menuData}
          />
        </ClickAwayListener>
      );
    };

从以下 HOC 获取其道具

export default connect(
  state => ({
    isOpen: selectors.getIsMenuOpen(state),
    menuData: selectors.getMenuData(state),
  }),
  {
    changeIsMenuOpen: actions.changeIsMenuOpen,
    changeAssetType: actions.changeAssetType,
  },
)(ContextMenu);

我认为将 onClickAway 侦听器放在 useCallback 中可能是个好主意，这样它的实例就不会在每次渲染中重新创建。类似的东西

const handleClickAway = useCallback(() => {
    batch(() => {
      changeIsMenuOpen(false);
      changeAssetType(null);
    });
  }, []);

但我不确定必须将什么放入依赖项数组中。应该是我正在使用的所有方法吗？类似的东西

[batch, changeIsMenuOpen, changeAssetType]

Answer 1

只有当某些内容确实影响应用程序性能时才应该记住它。

话虽这么说，要使用

useCallback

记忆函数，您需要传入函数中使用的所有外部项。

所以，

[batch, changeIsMenuOpen, changeAssetType]

是一个正确的依赖数组。

batch

来自图书馆。另外，

changeIsMenuOpen

和

changeAssetType

似乎是 redux 动作。因此，它们很可能会保持稳定。然而，需要注意的一件事是，如果您使用 props 中的某些未记忆的对象/函数，那么您的记忆本质上是无用的，因为该函数将在每次渲染时重新创建。事实上，由于需要进行额外的检查来维护记忆功能，因此如果没有记忆功能，您的应用程序的性能会稍好一些。

根据经验，仅在重新渲染成本高昂的情况下才记住内容。使用 React 的 Profiler (https://reactjs.org/docs/profiler.html)