react系列-bind this

XGBCCC 發布于2019-08-21 14:38 / 2931人閱讀

摘要：幸運的是，已經提供了對這個新語法的支持。而且函數綁定語法屬于草案中的特性，尚未納入標準。方案和方案會增加代碼量方案需要引入第三方庫，不過提供了很多使用的裝飾器。常用的方案是方案和方案刪除箭頭函數刪除

問題

對于大多數前端開發來說，JavaScript 的 this 關鍵字會造成諸多困擾，由于 JavaScript 代碼中的 this 指向并不清晰。在寫react應用時，也會也到很多作用域綁定引起的問題，React組件ES6的寫法，不會將方法內部的作用域自動綁定到組件的實例上。

下面展示一段問題代碼

class Search extends Component {
    static propTypes = {
        onSearch: React.PropTypes.func.isRequired
    }
    onSearch() {
        console.log("表單值：", this.field.getValues());
        this.props.onSearch(this.field.getValues());
    }
    render(){
        const {init} = this.field;
        return 
            
                    
                        
                    
                    
            
        
    }
}

如果你真的嘗試這么做了, 你會發現在onSearch中，因為this指向的是全局對象window而報錯。

解決辦法

我們都知道常規改變函數作用域的無非3種（Fiontion.prototype.bind call apply 三兄弟）,下面講解一下在es6中bind作用域的幾種方式。

使用Function.prototype.bind()

class Search extends Component {
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

ES7函數綁定語法
在 ES7 中，有一個關于 bind 語法的提議，提議將 :: 作為一個新的綁定操作符, 而且已經收錄在stage-0提案中，實際上::是Function.propotype.bind()的一種語法糖。幸運的是，Babel已經提供了對這個新語法的支持。

class Search extends Component {
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

在構造函數中bind this

    class Search extends Component {
    constructor(props) {
        super(props);
        this.onSearch = this.onSearch.bind(this)
    }
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

使用箭頭函數

class Search extends Component {
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

core-decorators.js
core-decorators.js為開發者提供了一些實用的 decorator，其中實現的autobind修飾器能使得方法中的this對象綁定到原始對象

class Search extends Component {
    @autobind
    onSearch() {
        console.log("表單值：", this.field.getValues());
        this.props.onSearch(this.field.getValues());
    }
    render(){
        const {init} = this.field;
        return 
            
                    
                        
                    
                    
            
        
    }
}

總結

比較

這里我們討論下以上幾種將this綁定到react組件方案的缺點，優點自己體會吧。
方案1和方案2，缺點也很嚴重，這種方式破壞了組件的pure render，每次組件render時，子組件Button的onClick值都是重新賦值所得，會導致Button做一次無謂的render。而且函數綁定語法::屬于es7草案中的特性，尚未納入es標準。使用需要謹慎。
方案3和方案4會增加代碼量
方案5需要引入第三方庫，不過core-decorators.js提供了很多使用的裝飾器。

場景

某些場景下，我們需要傳遞額外的參數，比如列表中刪除操作，需要傳id。常用的方案是方案1和方案4

// Function.prototype.bind()
刪除
// 箭頭函數
{
    this.doDelete(id, ...args)
}}>刪除

GPU云服務器云服務器 bind() bindings Binding bind

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87979.html

從 0 到 1 實現 React 系列 —— 4.優化setState和ref的實現

摘要：異步渲染利用事件循環，延遲渲染函數的調用調用回調函數處理后跟函數的情況淺合并邏輯事件循環，關于的事件循環和的事件循環后續會單獨寫篇文章。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 看源碼一個痛處是會陷進理不順主干的困局中，本系列文章在實現一個 (x)react 的同時理順 Rea...

wangdai 2019-08-23 10:43 評論0 收藏0
React類，方法綁定（第三部分）

摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...

livem 2019-08-20 17:59 評論0 收藏0
React 深入系列5：事件處理

摘要：使用匿名函數先上代碼代碼點擊的事件響應函數是一個匿名函數，這應該是最常見的處理事件響應的方式了。事件響應函數的傳參問題事件響應函數默認是會被傳入一個事件對象作為參數的。關于事件響應函數，還有一個地方需要注意。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 Web應用中，事件處理是重要的一...

willin 2019-08-22 17:28 評論0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，將介紹開發應用時，經常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準確，請讀者主要關注模式的內容。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。本篇是React深入系列的最后一篇，將介紹開發React應用時，經常用到的模式，這些模式并非都有...

Chao 2019-08-22 17:28 評論0 收藏0
React.js 小書 Lesson9 - 事件監聽

摘要：在不需要手動調用瀏覽器原生的進行事件監聽。沒有經過特殊處理的話，這些的事件監聽只能用在普通的的標簽上，而不能用在組件標簽上。的事件監聽方法需要手動到當前實例，這種模式在中非常常用。下一節中我們將介紹小書組件的和。 React.js 小書 Lesson9 - 事件監聽本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson9 轉載請...

yanbingyun1990 2019-08-21 17:33 評論0 收藏0