时间戳

首页 > 解决方案 > onClick={tmp} 和 onClick={()=>tmp} 有什么区别

javascript - onClick={tmp} 和 onClick={()=>tmp} 有什么区别

问题描述

onClick={tmp}我不知道和之间有什么区别onClick={()=>tmp}。我看过一些 YouTube 视频，其中当tmp函数有参数时，它表示为onClick={()=>tmp(parameter)}. 此外，当它没有参数时，它表示为onClick={tmp}。我不知道他们之间有什么区别。

标签： javascript

解决方案

onClick参数接受函数回调。假设这tmp是函数的名称，不同的实现工作如下：

  • onClick={tmp}刚刚传递了单击元素时执行的函数引用
  • onClick={()=>tmp}创建一个新的匿名函数，该函数返回对 tmp 的引用，这可能不是您想要的，而是您想使用回调调用该函数，如下所示onClick={()=>tmp()}：这等效于创建另一个函数function tmp2(){tmp()}，然后将其传递给 onClick，就像您在第一个示例中所做的那样
  • onClick={()=>tmp(parameter)}就像在上一个示例中一样，您正在使用参数调用函数，因为 onClick 不会将您想要的参数传递给您创建另一个无参数函数的函数
  • onClick={tmp(parameter)}不是函数引用，您在这里所做的是将 tmp 函数的结果传递给 onClick 参数，这很可能是不可取的。假设该函数在触发时更新 DOM，在这种情况下，不是在每次单击时更新 DOM，而是在渲染过程中最初更新它，然后使按钮不再工作。
  • 在某些条件下，onClick={tmp(parameter)}假设 tmp 是高阶函数，例如 tmp 函数的返回值是不同的函数，function tmp(paramter){return console.log}则可能会起作用：这相当于做onClick={console.log}

推荐阅读