首頁(yè) 猿問(wèn) React...

React 如何處理傳遞給事件處理程序的函數(shù)/回調(diào)？

JavaScript

慕俠2389804 2023-12-14 15:56:55

我尋找了關(guān)于這個(gè)特定問(wèn)題的不同博客/文檔，我了解一個(gè)方法需要如何綁定才能在渲染函數(shù)中使用，但是文檔無(wú)法詳細(xì)解釋一些事情，函數(shù)可以通過(guò)不同的方式被傳遞到事件處理程序的是：// call a already bound funciton<button onClick={this.sayHello}> Click me!</button>// bind in place <button onClick={this.sayHello.bind(this)}> Click me!</button>// use es6 arrow functions<button onClick={() => alert('hello'))}> Click me!</button>React 文檔表示，推薦的方法是綁定一個(gè)函數(shù)，否則該函數(shù)將在組件的每次渲染時(shí)被調(diào)用，并且可能會(huì)造成混亂。但是我不知道為什么每次渲染都會(huì)調(diào)用它。但它不是只有在點(diǎn)擊時(shí)才被調(diào)用嗎？或者onClick 如何處理或執(zhí)行在 food 下傳遞的函數(shù)？

查看完整描述

2 回答

慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

React 使用合成事件。如果您使用基于類(lèi)的組件，則需要將函數(shù)范圍綁定到該類(lèi)(only when we do not use arrow functions in our class)，否則關(guān)鍵字的范圍this將在該函數(shù)中丟失。這意味著如果使用普通的 ES5 函數(shù)作為處理程序并且我們this.setState()在其中使用，它將無(wú)法按預(yù)期工作。

如果您arrow function在類(lèi)中用作處理函數(shù)，則無(wú)需將其綁定到類(lèi)的范圍，因?yàn)榧^函數(shù)的范圍是其上方的一個(gè)執(zhí)行上下文。

如果您使用的是功能組件。沒(méi)有this可用的關(guān)鍵字，您直接調(diào)用函數(shù)（函數(shù)本身外部或內(nèi)部的處理程序）

現(xiàn)在：讓我解釋一下語(yǔ)法：

語(yǔ)法-1：

// call a already bound funciton

Click me!

</button>

sayHello您只需在 Component 類(lèi)中擁有一個(gè)名為（如下所示）的事件處理程序。

sayHello(){ ... } // Binded in constructor by doing this.sayHello = this.sayHello.bind(this)

或者

sayHello = ()=>{}

單擊按鈕時(shí)將調(diào)用/調(diào)用處理程序。

語(yǔ)法2：

// bind in place

Click me!

</button>

this這種語(yǔ)法是在我們的處理函數(shù)中綁定關(guān)鍵字語(yǔ)法的另一種簡(jiǎn)單方法sayHello，原因與我上面提到的相同。

語(yǔ)法3：

// use es6 arrow functions

<button onClick={() => sayHello('hello'))}>

Click me!

</button>

每當(dāng)我們想要將參數(shù)傳遞給處理函數(shù)時(shí)，我們都會(huì)使用這種語(yǔ)法。因此，在這種情況下，當(dāng)單擊按鈕時(shí)，我們的sayHello函數(shù)將獲取值“hello”作為參數(shù)。

你最后的懷疑：當(dāng) React 文檔說(shuō)該函數(shù)將在組件的每次渲染時(shí)被調(diào)用，并且可能會(huì)造成混亂。它們意味著，如果您僅在使用()=>{}語(yǔ)法的元素內(nèi)錯(cuò)誤地使用事件處理程序，并且還在this.setState()其中使用了 a，它將強(qiáng)制重新渲染。因?yàn)檫@就是setState()重新渲染我們的組件的作用。當(dāng)它到達(dá)同一行代碼時(shí)，它將再次重新渲染，這最終將破壞我們的應(yīng)用程序。

反對(duì) 回復(fù) 2023-12-14