是否使用ES6箭头对变换函数进行反应

Question

处理onChange事件时,这个工作

<input type="file" onChange={this.onChange}

不是这一个,即时执行该功能

<input type="file" onChange={this.onChange()}

不是这个,不执行

<input type="file" onChange={() => this.onChange}

但是这个确实如此

<input type="file" onChange={() => this.onChange()}

但是,当第一个自动发出事件对象时,第二个需要明确它

<input type="file" onChange={(e) => this.onChange(e)}
onChange(e) {
    console.log(e.target.files[0])
}

这是为什么？我们什么时候应该使用一个或另一个？

Answer 1

<input type="file" onChange={this.onChange}

这是因为onChangeprop是一个函数,然后你传递一个函数引用,所以它的工作原理.并<input>负责将事件参数传递给它.

<input type="file" onChange={this.onChange()}

这不起作用,因为您正在分配onChangeonChange函数的结果值.(但根据你的功能,它可以工作)

<input type="file" onChange={() => this.onChange}

这也不起作用,因为您正在创建一个新函数,并且在其中,您正在使用对this.onChange未执行它的函数的引用(带括号).

<input type="file" onChange={() => this.onChange()}

这会this.onChange()在您的匿名函数中执行函数(您正在调用),但是您没有将参数传递给它,那么您希望如何在this.onChange函数内部获取事件信息？

<input type="file" onChange={(e) => this.onChange(e)}
onChange(e) {
    console.log(e.target.files[0])
}

这解决了我之前的观点,现在在您的匿名函数中,您将获得事件信息e,并且您将它传递给您的onChange函数.然后它工作.

Answer 2

使用onChange={(e) => this.onChange(e)}，您实际上是在创建一个新函数，该函数在每个渲染期间调用this.onChange方法。

使用onChange={this.onChange}，您可以直接访问this.onChange方法。此方法仅定义一次，并且可以多次使用。基本上，您避免使用新的渲染创建新功能，从而使应用程序的性能略有提高