javascript - 何时使用function()，function或()=> function(callback)

我一直在寻找一个很好的解释，所以我很清楚。
例:

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

与

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

与

<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％!
因此，如果您可以为我提供解释，链接或类似内容，那就太好了!

谢谢!

最佳答案

<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的第一个参数传递