传入 args 的 useCallback

Question

我在 material-ui 中有一个 <Tabs /> component，它有一个用于更改模式的处理程序。更改具有此签名（来自 link）：

Signature:
function(event: object, value: any) => void
event: The event source of the callback
value: We default to the index of the child (number)

我的实现有点像这样：

<Tabs
  value={mode}
  onChange={handleChange}
/>
  <Tab id="choice1" value="one" label="Choice 1" />
  <Tab id="choice2" value="two" label="Choice 2" />
</Tabs>

我的 handleChange 函数只是一个围绕类似 useState 的钩子的箭头 fn

const handleChangeMode = (event, newMode) => {
  setMode(newMode);
}

为了避免每次都重新创建此箭头 fn，我尝试这样做：

const handleChangeMode = useCallback((event, newMode) => {
  setMode(newMode);
}, [setMode]);

但我注意到，变化最大的东西，新模式不是部门的一部分，因此可能无法正常运行？然后我从我最黑暗的梦中召唤出这个怪物：

const handleChangeMode = useCallback((event, newMode) => {
  useCallback(() => setMode(newMode), [setMode, newMode])();
}, [setMode]);

一路下来都是回调

之前，这个问题（）建议不要在那种情况下使用useCallback。但由于这是可以一遍又一遍地调用的东西，它似乎是这样做的地方。 useMemo 的例子也没有解决我想依赖传递给挂钩的变量的问题，我什至认为这在这个例子中不起作用（例如，我也错误地使用了挂钩因为不知道如何在我的示例中使用它）。

如何解决这个问题？

（编辑：事实上，我根本无法嵌套 callback/memo 挂钩。所以最后一个代码示例不起作用，正如我所怀疑的那样）

Answer 1

你问：

but I noticed, that the thing that changes the most, the new mode isn't part of the deps, and thus would perhaps not behave properly?

const handleChangeMode = useCallback((event, newMode) => {
  setMode(newMode);
}, [setMode]);

答案： 不，这段代码会正常运行。仅当您直接从组件中使用它们时，才需要将道具添加到依赖项。例如：

const { mode } = props;
const handleChangeMode = useCallback((event) => {
  setMode(mode);
}, [setMode, mode]);

在你的例子中，你得到 newMode 作为函数的参数。所以你不需要将它添加为依赖项。

传入 args 的 useCallback

useCallback with args passed in

javascript

reactjs

react-hooks

memoization

usecallback