Javascript 将函数传递给按钮onClick，使用匿名箭头函数回调vs作为React中的引用？

这是从Udemy讲师编写的某些代码中的箭头函数组件返回的。deleteAccount是从另一个文件引入的Redux操作创建者：

<button onClick={() => deleteAccount()}>Delete My Account</button>

以这种方式传递函数和作为下面所做的引用之间有什么区别（如果有的话）

<button onClick={deleteAccount}>Delete My Account</button>

在上面的代码中，您将click事件处理程序函数传递给onclick，onclick调用deleteCount函数， 而在下面的代码中

     <button onClick={deleteAccount}>Delete My Account</button>

您直接将deleteAccount作为单击处理程序传递给组件。

---

当您想在调用deletedAccount之前处理事件对象时，可以使用第一个选项；当您想直接调用deleteAccount时，可以使用第二个选项。

执行时会出现性能问题

<button onClick={() => deleteAccount()}>Delete My Account</button>

然而，当你使用

<button onClick={deleteAccount}>Delete My Account</button>

---

假设您使用构造函数中的bind方法或arrow操作符，则不会在每次调用render方法时创建匿名函数，而是只创建一次并使用匿名函数。这将提高性能。另外，在另一个方面，从onClick方法传递的所有参数都将直接传递给该方法。

虽然您是对的，但性能方面远远低于此代码所创建的关注点。因此，在您能够衡量性能打击之前，不要太担心它。@Emilebergron，如果您能列出更多可以被认为对我们大家都有好处的方面，那就太好了。我在这个问题下写了一条评论，如果您愿意，请随意使用它；假设您在构造函数中使用bind方法或arrow运算符，则匿名函数不会在每次调用render方法时创建，而是只创建一次并使用一次，这是令人困惑的，因为onClick={deleteAccount}不是arrow函数，也不是{this.deleteAccount}需要记住的一个问题是，当传递onClick={deleteAccount}时，deleteAccount将接收事件对象作为参数。如果函数使用参数认为它是account对象或类似的东西，它可能会创建一个古怪的bug来跟踪。

<button onClick={(event) => deleteAccount(event)}>Delete My Account</button>

<button onClick={deleteAccount}>Delete My Account</button>