Javascript React事件处理程序上的闭包是否会从不必要的重新加载程序中保存我的组件?

Javascript React事件处理程序上的闭包是否会从不必要的重新加载程序中保存我的组件?,javascript,reactjs,closures,Javascript,Reactjs,Closures,我了解到JSX事件处理程序中的匿名函数回调是一种性能反模式,因为它们会创建不必要的重新渲染器。有人建议我改为使用命名函数。对于我只关心传入事件的典型情况,没有问题。我的用例中的问题是我需要向这个回调传递额外的参数 我无法将onClick={handleClick}更改为onClick={handleClick(additionalParam)},因为现在我有一个函数调用,而不是函数引用 所以我开始思考,“如果调用返回一个带有我想要的签名的函数怎么办?” 我提出的解决方案涉及在回调上使用一个闭包以

我了解到JSX事件处理程序中的匿名函数回调是一种性能反模式,因为它们会创建不必要的重新渲染器。有人建议我改为使用命名函数。对于我只关心传入事件的典型情况,没有问题。我的用例中的问题是我需要向这个回调传递额外的参数

我无法将
onClick={handleClick}
更改为
onClick={handleClick(additionalParam)}
,因为现在我有一个函数调用,而不是函数引用

所以我开始思考,“如果调用返回一个带有我想要的签名的函数怎么办?”

我提出的解决方案涉及在回调上使用一个闭包以及所需的附加参数。下面我举一个例子。这能让我免于重播吗?如果没有,有什么问题,或者如何解决

具有匿名功能的原始版本
constudentbuttonblock=()=>{
常量handleClick=(e,分析数据)=>{
fireAnalytics('单击:学生按钮'{
…分析数据
});
};
返回(
{students.map(student=>(
handleClick(e,{source:student.name}}>
点击我
))}
);
};
带闭包的修改版本
const StudentButtonBlockModified=()=>{
常量handleClick=分析数据=>{
fireAnalytics('单击:学生按钮'{
…分析数据
});
};
const handleClickWithStudent=student=>{
return()=>{
handleClick({source:student.name});
};
};
返回(
{students.map(student=>(
点击我
))}
);
};

No这不会保留一个常量引用。闭包需要记忆,react已经提供了
react.useCallback()
Does
handleClick={handleClick({source:student.name})}
无效?@PatrickRoberts谢谢!我以前听说过React钩子,但现在我偶然发现了一个真正的用例
useCallback
,它似乎正是我所需要的。