时间戳

首页 > 解决方案 > 使用匿名箭头函数回调将函数传递给按钮onClick与作为React中的参考？

javascript - 使用匿名箭头函数回调将函数传递给按钮onClick与作为React中的参考？

问题描述

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

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

以这种方式传递函数和如下所示作为参考之间有什么区别（如果有的话）？

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

标签： javascriptreactjs

解决方案

执行时会出现性能问题

<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方法 inconstructor或使用箭头运算符，则不会在每次render调用方法时创建匿名函数，而是仅创建一次并使用。这提高了性能。此外，另一方面，从方法传递的所有参数onClick都将直接传递给方法。

推荐阅读