前言

在說起react的函數綁定之前，我們有必要了解下bind函數的作用是什么，函數的執行的上下文以及其默認的this是指向的哪里？有點抽象？那么你可以去看下下面的兩個方法的執行會有什么區別吧。

let customer={name:'Robin',getName:function(){console.log(this.name);} } customer.getName();//Robin let getName = customer.getName; getName();// CodePen let getNameWithCustomer = customer.getName.bind(customer); getNameWithCustomer();// Robin 復制代碼

如果你猜不出結果，可以看下我的codePen鏈接：鏈接,這是為什么呢？這是因為上下文不同，也就是this不同，當你通過賦值拿到方法，方法執行時會先去查看其上下文的this是什么，而不是直接使用其來源于哪個對象的。那么如果我們想使用對象里的屬性，可以使用bind方法綁定一個指定的對象。于是我們又得到了我們期望的name:robin值。

從上面的結果中，我們得到了以下的幾個認知：

1 函數調用時，只取決于其實際執行環境，與來源無關
2 如果我們希望函數執行或者函數拷貝時，不丟失參數，或者避免參數錯誤，我們應該將參數傳入，而不要過度依賴當前this的上下文。
3 如果我們只是一個工具函數，那么你可能沒有特別的場景一定要綁定什么，比如你定義一個add方法計算兩個參數的和，那么你不需要綁定其他的對象或者上下文。
4 如果我們希望函數執行時，在某個環境或者類內綁定指定的上下文，那么你需要顯性的綁定this才可以使用這個對象里的屬性以及屬性方法。
5 如果我們喜歡函數執行時，希望可以根據需求綁定任意的對象，也建議函數定義時，考慮好這一點，并綁定時綁定其對應的對象，這時候很可能你綁定的不是"this"。
6 bind方法只是改變上下文，并不會導致函數的執行。

備注：更多關于this的文章，詳解請看我另外兩篇文章，有非常詳盡的說明：神奇的this：鏈接, js中的作用域：鏈接

react中的事件綁定

react中的事件綁定，我們按照無參和有參兩種。無參非常簡單，直接綁定函數即可。當我們需要傳遞參數時，剛入門前端的人可能會直接綁定參數。這樣會導致兩個錯誤，1 丟失了事件參數 2 導致了函數的直接執行，而不是點擊后執行。（作為常識，我們還要知道，默認的點擊事件等事件是會返回event對象的哦）。

備注：如果你不清楚前端的事件流機制，可以查看我的js中事件流機制：鏈接

handleClick(e){ const {type} = e;// click} render(){const text = 'button text';return (<button onClick={this.handleClick}></button>)} // 直接傳參會導致錯誤 render(){const text = 'button text';return (<button onClick={this.handleClick(text)}></button>)}// 通過箭頭函數 避免這種問題 render(){const text = 'button text';return (<button onClick={(e,text) => this.handleClick(e,text)}></button>)} 復制代碼

所以你通過箭頭函數避免了上面的錯誤，但這種使用與我們的常規使用是不同的。為什么呢？因為我們一般在react組件中需要經常使用當前組件的上下文，包括當前組件的state、方法以及傳入的屬性等。這時候，我們想起了前言中的bind語法，其可以改變上下文的this，支持事件獲知的同時，綁定當前對象。而且我們通過bind的語法清楚，其不但可以綁定上下文，還可以支持靈活的傳參，如果你不清楚其基本語法，可以查看js- MDN的介紹：鏈接.

下面的內容借鑒于react中文官網的教程--傳遞函數給組件，做了簡單的整理：原文鏈接：鏈接，有以下的幾種方式。

// 第一種 ：render 中bind綁定 render(){const text = 'button text';return (<button onClick={ this.handleClick.bind(this,text)}></button>) } // 第二種 ：constructor bind綁定 constructor(props){this.handleClick = this.handleClick.bind(this); } render(){const text = 'button text';return (<button onClick={ (e,text)=> this.handleClick(e,text)}></button>) }// 第三種 ：class func 箭頭函數 <=> 上面的調用方法均是常規方法寫法 handleClick=()=>{} render(){const text = 'button text';return (<button onClick={(e,text)=> this.handleClick(e,text)}></button>) } 復制代碼

需要注意的是，在官網文檔中，我們看到在rende函數中使用箭頭函數以及使用bind綁定都會影響性能，而在constructor中將所有函數綁定一遍又過于繁瑣，我們一般的框架中習慣于使用class 屬性函數，--箭頭函數的方式實現，也就是上面代碼中的第三種，同樣，我們在react ant的ui框架的input組件中找到了icon的元素事件傳遞的方式也是第三種，查看鏈接。參考下面的原代碼：

handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {this.setValue('', e, () => {this.focus();});};renderClearIcon(prefixCls: string) {const { allowClear } = this.props;const { value } = this.state;if (!allowClear || value === undefined || value === null || value === '') {return null;}return (<Icontype="close-circle"theme="filled"onClick={this.handleReset}className={`${prefixCls}-clear-icon`}role="button"/>);} 復制代碼

小結

通過本文希望你能清楚我們為什么要bind this，以及如何正確綁定的一些可行方式，和每種方式的優缺點，還有一些如何避免低級錯誤，導致函數直接執行的原因。同樣，我們也知道了一般的ui框架中采用的是哪種方式--類屬性的方式。

更多精彩內容跳轉：原文語雀連接

寄語

我們一起從從小白到大師。? ? ? ? ? ? ? ? ? ? ? --- Robin

轉載于:https://juejin.im/post/5ca81acce51d452e62014939

總結

以上是生活随笔為你收集整理的react之bind函数到组件通识篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。