传递箭头函数与传递函数 [英] Passing an arrow function vs passing the function

问题描述

说我有一个功能:

handleChange = (e) => {
  this.setState({ [e.target.id]: e.target.value });
}

以下内容有什么区别?

1.

<FormControl value={this.state.password} onChange={this.handleChange} />

<FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} />

推荐答案

第二种情况是创建了匿名函数，该函数执行 handleChange 方法，并由此提供了上下文.

The second case an anonymous function is created which executes the handleChange method and and thereby providing it the context.

每次React组件呈现时，由于要向处理程序提供相同的handleChange方法引用，所以在第二种情况(而不是第一种情况)中会创建一个新函数.

Everytime the React component renders, a new function is created in the second and not in the first case since the same reference of handleChange method is being provided to the handler.

您可能还希望查看

You might also want to look at how arrow function in render achieve context binding

这篇关于传递箭头函数与传递函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！