Javascript {（）=>；（this.whatever）}vs{this.whatever}

假设我们有一个处理程序（在react中的类扩展组件内部）

当我们这样做的时候

onClick=“{（）=>this.whatever}”

，当javascript处理我们的代码（或编译/读取）时，这将在单击事件发生之前不会执行

相比之下

{this.whatever}应该在javascript到达此点或读取此点时立即执行

因此，我们通常使用this

{（）=>this.which}

我们希望事件在有人说click之后发生？当JS编译时，

{this.whatever}

会立即执行handler/method吗

[更新]

---

在我按照一些教程制作的react应用程序中，我们有一个箭头函数处理程序，它可以说

任何

，并像这样传递给子组件

。在子组件中，我们做的是

，这是有效的。那么，我们为什么不做

props.whatever}/>

（如果我们遵循后面的方法，onClick事件也不起作用）

只要它调用的函数看起来像

whatever = () => {
  //Something 
}

{this.whatever（）}

将立即被调用

---

最好编写一个单独的ES6函数，这样就不会导致每次重新呈现页面时都重写该函数。

这两个命令的含义相同

但是

onClick={（）=>this.whatever（）}

会消耗更多的资源，因为每次

render

调用都会重新实例化该函数

您希望在需要使用参数时使用arrow函数

onClick={event => this.whatever(event)}

---

{this.whatever}

与

{this.whatever（）}

在javascript（以及大多数其他语言）中执行函数时，需要使用括号。如果使用

{this.whatever}

将函数作为参数传递给道具，当用户单击时，传递的函数将被激发

下面是显示差异的示例代码

const whatever=（）=>{
返回“我从函数中记录”；
}
console.log（无论什么）；//返回函数
console.log（（（）=>随便什么））//返回返回函数的函数
console.log（whatever（））；//运行函数

（）=>this.whatever（）

和

this.whatever在本例中具有相同的效果，因为您创建了属性初始化的箭头函数。如果您在类上创建了一个常规类方法
whatever（）{}
，则会出现以下问题：
var obj={val:1，fun:function（）{return this.val；}；var-fun=obj.fun；obj.fun（）；乐趣（）
您需要在javascript中显式调用函数，因此
onClick={this.which}
将只将函数分配给事件侦听器（React在内部执行此操作）
this。无论什么
都只是对函数的引用。您缺少了
bind
@J.Pichardo的使用。您不需要使用es6绑定，它自己就可以实现，这是用于箭头函数的only@J.Pichardo这是真的，但如果我执行类似于
whatever=（event）=>{//something}的操作，它就是一个箭头函数
然后
onClick={this.whatever（event）}
。这是否等同于
onClick={event=>this.whatever（event）}
No，无论何时，只要在运行某个函数后加上括号，
onClick
都将成为
whatever
的
返回值
谢谢你的精彩回答
{this.whatever}
传递函数。所以当我做一些类似于
onClick={this.which}
的事情时，它会在单击时执行/调用我的函数吗？还是在单击之前？如果是，那么
onClick={（）=>this.whatever}
也会在单击时执行该函数？（1/2）在我按照一些教程制作的react应用程序中，我们有箭头函数处理程序say
purchasingHandlerOpen
，它像这样传递给子组件
purchasingHandlerOpen={this.purchasingHandlerOpen}
。在子组件中，我们做的是
，这是有效的。那么，在这里我们为什么不做
props.purchasingHandlerOpen}/>
（如果我们遵循后面的方法，onClick事件也不起作用）@KuchBhi
onClick
是一个本机prop，它在用户单击后立即运行带有事件参数的传递函数。有了这些信息，您需要传递一个函数。在这种情况下，Arrow函数不是必需的，因为它只是在函数中添加了第二个空函数。我将更新我的示例。如果没有太多问题，您能否使用“this”关键字更新您的示例？@KuchBhi添加了一个示例react应用程序和一些文档链接。
whatever = () => {
  //Something 
}

onClick={event => this.whatever(event)}