Javascript 事件处理程序：是否使用咖喱？

我正在使用Material ui进行React项目，注意到编写事件处理程序的一种奇怪的（？）方式：

在上面的示例中，复选框的处理程序定义为：

常量handleToggle=（值）=>（）=>{
const currentIndex=checked.indexOf（值）；
const newChecked=[…checked]；
如果（当前索引==-1）{
newChecked.push（值）；
}否则{
新检查。拼接（当前索引，1）；
}
setChecked（newChecked）；
};

我通常做的只是：

常量handleToggle=（值）=>{
const currentIndex=checked.indexOf（值）；
const newChecked=[…checked]；
如果（当前索引==-1）{
newChecked.push（值）；
}否则{
新检查。拼接（当前索引，1）；
}
setChecked（newChecked）；
};

结果是一样的。那么，以这种方式编写处理程序的具体原因是什么

只是为了在使用函数时获得更短的代码

---

谢谢大家！对不起，我不清楚

我理解使用这两个处理程序的区别

对于第一个，我像

onClick={handleToggle（value）}

一样使用它

对于第二个，onClick={（）=>{handleToggle（value）}}

---

只是想知道哪一个是首选的。

当我们必须将数据作为参数传递给我们的处理程序时，基本问题就出现了

如果你试着用第二种方法（你在问题中称之为正常方法）来做，并且你的处理程序如下（没有任何修改）

您将看到函数最初将立即被调用，而单击处理程序随后将不工作<代码>当我们希望将数据传递给处理程序参数时，会发生这种情况。运行下面的代码段，您将看到在初始渲染时立即调用该方法，然后处理程序不再工作：）

代码演示：

函数应用程序（）{
常量handleClick=（值）=>{
log（“你好”）；
};
返回（）；
}
ReactDOM.render（，document.querySelector（“#root”）

这不一样。第一个返回函数中的函数，第二个返回单个函数。如何使用
handleToggle
？如果使用第二种方法，它将立即调用它，并使用其返回值（
undefined
）作为
onClick
处理程序（实际上禁用它），使代码在呈现组件时进行计算，当
列表项
为clicked@Justinas他们将其用作JSX中的
onClick
处理程序object@Junming王：根据你的编辑。我已经回答了。这取决于你的选择，我个人更喜欢避免讨好的方式。这有点让人困惑：）所以没有明显的区别（比如在性能或其他方面）？只有两种不同的编码风格？不，我认为当你使用curry时，函数中有一个函数：）所以使用了一个额外的函数。我觉得这太过分了……亲爱的王：）希望你接受我的回答并投票，如果它对你有帮助的话：）谢谢。我尝试过为您介绍所有的可能性：）这也将帮助其他开发人员
onClick={handleToggle(value)}