首頁 > 文章 > web前端 > React元件中綁定this的原因分析

React元件中綁定this的原因分析

不言原創: 2018-07-21 10:27:451296瀏覽

這篇文章給大家分享的是關於React元件方法中為什麼要綁定this，內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。

如果你嘗試使用過React進行前端開發，一定看過下面這樣的程式碼：

//假想定义一个ToggleButton开关组件
class ToggleButton extends React.Component{
    constructor(props){
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this); 
        this.handleChange = this.handleChange.bind(this);
    }
    handleClick(){
        this.setState(prevState => ({
            isToggleOn: !preveState.isToggleOn
        }));
    }
    handleChange(){
        console.log(this.state.isToggleOn);
    }
    render(){
        return(
           <button onClick={this.handleClick} onChange={this.handleChange}>
                {this.state.isToggleOn ? &#39;ON&#39;:&#39;OFF&#39;}
            </button>
        )
    }
}

建構方法中為什麼要給所有的實例方法綁定this呢？

1. 程式碼執行的細節

上例只是一個元件類別的定義，當在其他元件中呼叫或是使用ReactDOM.render( )方法將其渲染到介面上時會產生一個元件的實例，因為元件是可以重複使用的，物件導向的程式設計方式非常適合它的定位。根據this指向的基本規則就可以知道，這裡的this最終會指向元件的實例。

元件實例產生的時候，建構器constructor會被執行，這裡著重分析一下下面這行程式碼：

this.handleClick = this.handleClick.bind(this);

此時的this指向新生成的實例，那麼賦值語句右側的表達式先查找this.handleClick( )這個方法，由物件的屬性查找機制（沿原型鏈由近及遠查找）可知此處會查找到原型方法this.handleClick( ),接著執行bind(this)，此處的this指向新生成的實例，所以賦值語句右邊的表達式計算完成後，會產生一個指定了this的新方法，接著執行賦值操作，將新產生的函數賦值給實例的handleClick屬性，由物件的賦值機制可知，此處的handleClick會直接作為實例屬性產生。總結一下，上面的語句做了一件這樣的事情：

把原型方法handleClick( )改為實例方法handleClick( ),並且強制指定這個方法中的this指向目前的實例。

2. ES5的寫法中為什麼不用bind(this)?

ES5的寫法是指使用React.createClass( )方法來定義元件， React在V16以上的新版本中已經移除了這個API，你可以透過閱讀更早版本的原始碼看到這個方法的細節。

  //旧版本`react`中`createClass`方法片段
  if (this.__reactAutoBindMap) {
        this._bindAutoBindMethods();
  }

在舊版的React中，createClass()的定義中可以看到上面的程式碼，拋開其他複雜的邏輯，從方法名稱就可以看出這是一個自動綁定的方法，實際上在這個方法中所完成的，就是對組件中自訂方法的this強制綁定，感興趣的讀者可以自行翻看源碼了解細節。

3. 綁定this的必要性

在元件上綁定事件監聽器，是為了回應使用者的互動動作，特定的互動動作觸發事件時，監聽函數往往都需要操作元件某個狀態的值，進而對使用者的點擊行為提供回應回饋，對開發者來說，這個函數觸發的時候，就需要能夠拿到這個元件專屬的狀態集合（例如在上面的開關元件#在 ##ToggleButton範例中，它的內部狀態屬性state.isToggleOn的值就標記了這個按鈕應該顯示ON或OFF），所以此處強制綁定監聽器函數的this指向目前實例的也很容易理解。

React建構方法中的bind會將回應函數與這個元件Component進行綁定以確保在這個處理函數中使用this時可以時刻指向這一元件的實例。

4. 如果不綁定this

如果類別定義中沒有綁定

this的指向,當使用者的點擊動作觸發this. handleClick( )這個方法時，實際上執行的是原型方法，可這樣看起來並沒有什麼影響，如果當前元件的構造器中初始化了state這個屬性，那麼原型方法執行時，this.state會直接取得實例的state屬性，如果建構其中沒有初始化state這個屬性（例如React中的UI元件），說明元件沒有自身狀態，此時即使呼叫原型方法似乎也沒什麼影響。

事實上的確是這樣，這裡的bind(this)所希望提前規避的，就是著名的this指標遺失的問題。

例如使用

解構賦值的方式取得某個屬性方法時，就會造成引用轉換遺失this的問題:

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

上例中解構賦值所取得的

handleClick這個方法在執行時就會報錯，Class的內部是強制運行在嚴格模式下的，此處的this在賦值中丟失了原有的指向，在運行時指向了undefined，而undefined是沒有屬性的。

另一個存在的限制，是沒有綁定

this的響應函數在非同步運行時可能會出問題，當它作為回調函數被傳入一個非同步執行的方法時，同樣會因為遺失了this的指向而引發錯誤。

如果沒有強制指定元件實例方法的this，在未來的使用中就無法安心使用引用轉換或作為回呼函數傳遞這樣的方式，對於後續使用和協作開發而言都是不方便的。

5. 小結

this的使用非常靈活，但這種靈活性也帶來了很多混亂。這裡的bind(this)是為了改進javascript語言級的缺陷，並不是只有React中才需要這樣做，這個問題是伴隨著物件導向程式設計而產生的，在使用javascript進行插件和框架的開發時，這個問題的影響會更加明顯。之所以說它是語言層級的缺陷，是因為Java中對於this在同樣場景下的指向更符合正常思考邏輯，而javascript中如果不顯示綁定，就會出現語言執行結果和方法的命名表意不一致的情況。

React元件中綁定this的原因分析

1. 程式碼執行的細節

2. ES5的寫法中為什麼不用bind(this)?

3. 綁定this的必要性

5. 小結

相關文章