reactjs - 是否使用 ES6 箭头响应 onChange 函数

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

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

与 onChange={this.onChange} ，您正在直接访问 this.onChange 方法。该方法只定义一次，多次使用。基本上，您避免使用新渲染创建新函数，从而为应用程序提供轻微的性能增强