這篇文章主要介紹了React中this綁定的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、天心網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為天心等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

我們在react項(xiàng)目開發(fā)時，通常會遇到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 

            
            
        
    }
}

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

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

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

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

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“React中this綁定的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!