何时使用 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%！如果你能提供解释、链接或类似的东西，那就太好了！

谢谢！

- Michael

---

第三个是无效的。 - Felix Kling

第四种情况（裸函数引用）很少是正确的。 - Alnitak

第二个不会起作用，函数会立即被调用。 - vincenth

@Alnitak：为什么很少正确？ - Michael

因为当调用裸函数引用时，它将不再引用正确的 this。 - Alnitak

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

- hsz

---

<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />这段代码是有效的（使用 react）。不过还是感谢您提供的其他解释 :) - Michael

@Michael: 这不是有效的。 - Felix Kling

@hsz：为了澄清看起来无效的代码，我将添加更多代码： nameChangedhandler =（event，id）=> { const personIndex = this.state.persons.findIndex(p => { return p.id === id; }); // 复制正确索引的人员 const person = { ...this.state.persons[personIndex] }; // 为此人分配新名称 person.name = event.target.value;（更多代码...）} - Michael

@Michael：nameChangedhandler 是什么并不重要。在这里，click ={changed= {...}} 根本不是有效的代码。 - Felix Kling

Answer 2

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

如果我有一个函数

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

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

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

setTimeout 需要一个函数作为参数，该函数会在提供的时间间隔后被调用。

同样地，在 React 中，click、change 等都是 props，需要传递一个函数作为参数，当事件发生时该函数会被调用。

---

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`？

- Felix Kling

---

King：非常感谢您的解释。只需要再澄清一点：您说如果我想传递一个参数到箭头函数中，它看起来像这样：x => func(x)，这完全有道理。那么() => func(x)是什么意思呢？再次感谢！ :) - Michael

基本上是一样的，除了 x 必须在函数的词法作用域中的其他位置被定义。例如：var x = 42; function foo() {console.log(x);}; foo();。这通常被称为闭包。如果没有声明 x，将会出现错误。 - Felix Kling

Answer 3

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

在（代码中）…

<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

- Shubham Khatri

---

很高兴能帮到您 :-) - Shubham Khatri