何时使用function(),function或()=> function(callback)

Question

我一直在寻找一个很好的解释,所以这一切都清楚了.例:

<Char click={()=>this.onDeleteHandler(index)}/>

VS

<Char click={this.onDeleteHandler()}/>

VS

<Person changed={(event) => this.nameChangedhandler(event, person.id)} />

和

<Char click={this.onDeleteHandler}/>

关于第三个代码,这里是名为:

nameChangedhandler = (event, id) => {
const personIndex = this.state.persons.findIndex(p => {
  return p.id === id;
});

// copying the person with the right index
const person = {
  ...this.state.persons[personIndex]
};

// Assigning new name to this person
person.name = event.target.value;

// copying array of persons, then manipulating the correct object of person by using the index
const persons = [...this.state.persons];
persons[personIndex]= person;

this.setState({
  persons: persons
});

}

有些方面对我来说很清楚,但绝对不是100%!所以,如果你能给我一个解释,链接或类似的东西,那将是伟大的!

谢谢!

Answer 1

<Char click={()=>this.onDeleteHandler(index)}/>

它将匿名函数作为回调传递 - 当被点击时 - 触发onDeleteHandler额外index参数(必须在之前的范围内定义).

<Char click={this.onDeleteHandler()}/>

它传递onDeleteHandler()作为回调的结果- 可能是个坏主意 - onDeleteHandler函数必须返回另一个将在点击时调用的函数.

<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />

看起来无效 - 会导致语法错误.

<Char click={this.onDeleteHandler}/>

与第一个示例类似,但不采用自定义参数.默认点击事件将作为第一个参数传递onDeleteHandler