何时使用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)}/>

它将匿名函数作为回调传递 - 当单击时 - 触发带有额外index参数的onDeleteHandler （必须在之前的范围中定义）。

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

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

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

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

<Char click={this.onDeleteHandler}/>

与第一个示例类似，但不采用自定义参数。 默认点击事件将作为onDeleteHandler的第一个参数onDeleteHandler

Answer 2

通常，当您需要将处理程序绑定到上下文或提供自定义参数时，您将使用内联箭头函数

在

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

onDeleteHandler绑定到呈现Char的上下文，并传递自定义参数index 。 由于返回一个新函数进行click ，它可以在Char执行，如this.props.click()

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

这里评估onDeleteHandler并将值返回给click prop

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

这里语法无效，应该是

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

在这种情况下，它采用默认参数并将其与自定义参数一起传递给nameChangedHandler ，它还执行绑定

<Char click={this.onDeleteHandler}/>

刚刚分配的参考onDeleteHandler到click ，只要你调用click ， onDeleteHandler将与您传递在调用点击中的上下文中的参数来调用onDeleteHandler将指的是从它被调用文意，除非你绑定onDeleteHandler使用箭头功能或在构造函数中

Answer 3

整个问题似乎归结为func和func()和() => func()之间的区别。 它与React无关。

如果我有一个功能

function func() {
  console.log(42);
}

然后我可以通过func引用函数对象本身。 如果我需要将函数传递给另一个函数 ，例如setTimeout ，这很有用：

setTimeout(func, 1000); // calls func after 1000ms

setTimeout需要一个可以在提供的超时后调用的函数。

类似地，在React中， click ， change等都是期望传递事件发生时调用的函数的道具。

---

另一方面， func() 调用该函数 。 如果您确实需要在那时调用函数，则需要执行此操作。 这意味着，如果我这样做

setTimeout(func(), 1000);

然后我先调用func 并将其返回值传递给setTimeout （即我现在调用func ， setTimeout以后不调用它）。 所以这通常是不正确的， 除非 func返回一个函数本身，它实际上是我想传递给另一个函数的返回值。

---

() => func()只是一个只调用func的新函数。 对于所有的目的和目的，它等同于func ：

 function func() { console.log(42); } const anotherFunc = () => func(); func(); anotherFunc(); 

当然，如果func需要一个参数，那么我必须在将它包装到另一个函数时传递它，这就是x => func(x)所做的。

---

另一部分是如何将函数分配给对象属性和this工作。 简而言之， this指的是（非箭头）函数内部取决于函数的调用方式 。 干

this.foo();
// or
var bar = this.foo;
bar();

产生两个不同的结果，因为this.foo()和bar()是调用函数的两种不同方式。 有关更多信息，请参阅如何在回调中访问正确的`this`？