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

的第一个参数传递

Answer 2

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

在

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

onDeleteHandler绑定到渲染Char并传递自定义参数index的上下文。由于新功能返回到click，因此可以像Char一样在this.props.click()内部执行

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

在这里评估onDeleteHandler并将值返回到click属性

<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就会被调用，其中包含您在调用click和上下文时所传递的参数除非您使用箭头函数或在构造函数中绑定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（即 I 现在调用func，{ {1}}稍后再调用）。因此，这通常是不正确的，除非 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()是调用函数的两种不同方式。有关更多信息，请参见How to access the correct `this` inside a callback?

何时使用function（），function或（）=> function（callback）

3 个答案: