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

我一直在寻找一个好的解释，所以对我来说一切都很清楚。 例子：

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

vs

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

vs

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

and

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

thanks!

<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