您好,登錄后才能下訂單哦!
這篇文章主要介紹了React中this綁定的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
我們?cè)趓eact項(xiàng)目開發(fā)時(shí),通常會(huì)遇到this
綁定的問題。解決的方法總結(jié)下分為下面的三種情況:
import React from 'react'export default class Demo extends React.Component{ constructor(props){ super(props); this.click1.bind(this)//方式1: 在構(gòu)造函數(shù)內(nèi)綁定 } click1(){ } click2=()=>{//方式2: 使用箭頭函數(shù) } click3(){ } render(){ //方式3: 在render內(nèi)綁定 return <p> <button onClick={this.click2}></button> <button onClick={this.click3.bind(this)}></button> </p> } }
三種方式都能達(dá)到同樣的效果,但是性能上還是有很大的差別的。
首先,第三種方式性能是最差的,每次在render的時(shí)候都要去綁定this
。
對(duì)于第二種和第三種,我們這樣看其實(shí)看不出差別,但是如果我們將代碼編譯為ES5
之后,就能看到其中的區(qū)別了:
首先,使用箭頭函數(shù)的方式,該方式其實(shí)是定義在this
上的,也就是說,在每一個(gè)實(shí)例化之后的this
都會(huì)定義該方法,但是通過方式1,該方式其實(shí)是定義在prototype
上的,各個(gè)實(shí)例對(duì)象共享該方法。所以,單純從內(nèi)存空間的消耗上來看,方式1其實(shí)是最好的。
但是定義在原型鏈上的方法,在實(shí)際調(diào)用該方法的時(shí)候,其查找的過程是這樣的:
首先檢查this
上是否有該方法的定義,如果沒有的話,則去prototype
上查找是否有該方法,所以在方法調(diào)用的過程中,會(huì)經(jīng)歷一次跨原型鏈的查找。該過程是方法1帶來的額外的消耗。
但是箭頭函數(shù)的方式,在實(shí)際調(diào)用的時(shí)候,訪問的是外層作用緩存的_this
, 所以在作用域查找上有一層消耗。
經(jīng)過私底下的測(cè)試發(fā)現(xiàn),在原型鏈上的查找比作用域上的查找,性能會(huì)好很多。所以綜合來看,還是第二種的方式是最優(yōu)的。
另外,看老外的代碼中,發(fā)現(xiàn)過一個(gè)批量綁定的方式,其實(shí)是對(duì)方案一的一種優(yōu)化,可以簡(jiǎn)單借鑒一下:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“React中this綁定的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。