React this綁定的幾點思考

我們在react專案開發時，通常會遇到this 綁定的問題。解決的方法總結下分為下面的三種情況：

import React from 'react'export default class Demo extends React.Component{
    constructor(props){        super(props);        this.click1.bind(this)//方式1: 在构造函数内绑定
    }
    click1(){
    }
    click2=()=>{//方式2: 使用箭头函数
    }
    click3(){
    }
    render(){        //方式3: 在render内绑定
        return <p>
            <button onClick={this.click2}></button>
            <button onClick={this.click3.bind(this)}></button>
        </p>
    }
}

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

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

對於第二種和第三種，我們這樣看其實看不出差別，但是如果我們將程式碼編譯為ES5 之後，就能看到其中的差異了：

首先，使用箭頭函數的方式，該方式其實是定義在this 上的，也就是說，在每一個實例化之後的this 都會定義該方法，但透過方式1，該方式其實是定義在prototype 上的，各個實例物件共享該方法。所以，單純從記憶體空間的消耗來看，方式1其實是最好的。

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

但是箭頭函數的方式，在實際呼叫的時候，存取的是外層作用快取的_this，  所以在作用域尋找上有一層消耗。

經過私底下的測試發現，在原型鏈上的查找比作用域上的查找，性能會好很多。所以綜合來看，還是第二種的方式是最優的。

另外，看老外的程式碼中，發現過一個批次綁定的方式，其實是對方案一的一種優化,可以簡單借鑒一下：

本文解釋了React this綁定的幾點思考，更多相關內容請關注php中文網。

相關建議：

vue中父元件向子元件echarts傳值問題

Javascript 嚴格模式詳解

php實作登入功能的相關程式碼解析

#

以上是React this綁定的幾點思考的詳細內容。更多資訊請關注PHP中文網其他相關文章！