前端之家

  1. 首页
  2. 问答

传入参数的useCallback

• 问答

我在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挂钩。因此，我怀疑最后一个代码示例不起作用）

ckwcaowei 回答：传入参数的useCallback

您问：

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

    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]); 作为函数的参数。因此，您无需将其添加为依赖项。

javascriptmemoizationreact-hooksreactjsusecallback
本文链接：https://www.f2er.com/2791004.html

大家都在问