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

Question

这是由Udemy讲师编写的某些代码中的箭头功能组件返回的[deleteAccount()是从另一个文件引入的Redux动作创建者：]

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

以这种方式传递函数和作为参考进行如下操作之间有什么区别？

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

Answer 1

执行时会出现性能问题

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

每次调用render()时，它将创建一个新的匿名方法，该方法将删除该帐户。另外，使用上述方法，如果要使用event方法显式给出的onClick对象，则需要将代码修改为
<button onClick={(event) => deleteAccount(event)}>Delete My Account</button>

而您使用时
<button onClick={deleteAccount}>Delete My Account</button>

假设您正在bind中使用constructor方法或使用箭头运算符，则不会在每次调用render方法时都创建匿名函数，而是仅创建一次并使用该匿名函数。这样可以提高性能。另外，从onClick方法传递的所有参数都将直接传递给该方法。

Answer 2

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

在以上代码中，您将click事件处理函数传递给onclick，从而对deleteAccount函数进行了调用，而在下面的代码中
     <button onClick={deleteAccount}>Delete My Account</button>

您直接将deleteAccount作为点击处理程序传递给组件。您可以在调用deleteAccount之前处理事件对象时使用第一个，而要直接调用deleteAccount时使用第二个。