何時使用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`？