Question

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

签名：
function(event: object, value: any) => void
event：回调的事件源
值：我们默认使用子级（数字）的索引

我的实现有点像这样：

<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);
}

为了避免每次都重新创建该箭头，我尝试执行以下操作：

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

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

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

一直是回调。

以前，此问题（React hooks useCallback with parameters inside loop）建议在这种情况下不要使用useCallback。但是由于这是一遍又一遍的事情，因此似乎是应该这样做的地方。同样，使用useMemo的示例也无法解决，我想依赖传递给钩子的变量，在这个示例中我什至认为它不起作用（例如，我也使用了错误的钩子）因为不知道如何在我的示例中使用它。

如何解决这个问题？

（编辑：实际上，我根本无法嵌套callback / memo挂钩。因此，我怀疑最后一个代码示例不起作用）

Answer 1

您问：

但是我注意到，变化最大的东西是新模式不是部门的一部分，因此可能无法正常运行？

    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function (e) {
            e.preventDefault();
            window.ReactNativeWebView.postMessage(e.currentTarget.getAttribute("href"));
        }
    }

    var links = document.getElementsByTagName('img');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function (e) {
            e.preventDefault();
            window.ReactNativeWebView.postMessage(e.currentTarget.getAttribute("src"), '*');
        }
    }
}

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

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

在您的情况下，您将const { mode } = props; const handleChangeMode = useCallback((event) => { setMode(mode); }, [setMode, mode]);作为函数的参数。因此，您无需将其添加为依赖项。

传入参数的useCallback

1 个答案: