本篇內(nèi)容介紹了“React中this綁定的方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年積累的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有潤(rùn)州免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

我們?cè)趓eact項(xiàng)目開(kāi)發(fā)時(shí)，通常會(huì)遇到this 綁定的問(wèn)題。解決的方法總結(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 

            
            
        
    }
}

三種方式都能達(dá)到同樣的效果，但是性能上還是有很大的差別的。

首先，第三種方式性能是最差的，每次在render的時(shí)候都要去綁定this。

對(duì)于第二種和第三種，我們這樣看其實(shí)看不出差別，但是如果我們將代碼編譯為ES5 之后，就能看到其中的區(qū)別了：

首先，使用箭頭函數(shù)的方式，該方式其實(shí)是定義在this 上的，也就是說(shuō)，在每一個(gè)實(shí)例化之后的this 都會(huì)定義該方法，但是通過(guò)方式1，該方式其實(shí)是定義在prototype 上的，各個(gè)實(shí)例對(duì)象共享該方法。所以，單純從內(nèi)存空間的消耗上來(lái)看，方式1其實(shí)是最好的。

但是定義在原型鏈上的方法，在實(shí)際調(diào)用該方法的時(shí)候，其查找的過(guò)程是這樣的：
首先檢查this 上是否有該方法的定義，如果沒(méi)有的話(huà)，則去prototype 上查找是否有該方法，所以在方法調(diào)用的過(guò)程中，會(huì)經(jīng)歷一次跨原型鏈的查找。該過(guò)程是方法1帶來(lái)的額外的消耗。

但是箭頭函數(shù)的方式，在實(shí)際調(diào)用的時(shí)候，訪(fǎng)問(wèn)的是外層作用緩存的_this，  所以在作用域查找上有一層消耗。

經(jīng)過(guò)私底下的測(cè)試發(fā)現(xiàn)，在原型鏈上的查找比作用域上的查找，性能會(huì)好很多。所以綜合來(lái)看，還是第二種的方式是最優(yōu)的。

另外，看老外的代碼中，發(fā)現(xiàn)過(guò)一個(gè)批量綁定的方式，其實(shí)是對(duì)方案一的一種優(yōu)化,可以簡(jiǎn)單借鑒一下：

“React中this綁定的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！