正式學習 react(三)

有了基礎的webpack基礎，咱們要對react的基本語法進行學習。

我這個教程所有用es6 實現。可能會忽略一些最基本的語法講解，這些你在官網上或者其餘別的地方都比我講的全。

 

 

今天我要講一下react用的較多的bind函數。

 

源碼分析一波：

1 Function.prototype.bind = function() {  
2     var __method = this;  
3     var args = Array.prototype.slice.call(arguments);  
4     var object=args.shift();  
5     return function() {  
6         return __method.apply(object,  
7              args.concat(Array.prototype.slice.call(arguments)));  
8 }  
9 }  

當咱們在react裏常常看到相似這樣的代碼：

this.fn = this.fn.bind(this);

根據上面的語法，其實就是將當前上下文環境綁定到fn中。

 

爲全部function對象增長一個新的prototype(原型)方法bind: 

1.將調用bind方法的對象保存到__method(方法)變量裏面。 
2.將調用bind方法時傳遞的參數轉換成爲數組保存到變量args。 
3.將args數組的第一位[0]元素提取出來保存到變量object。 
4.返回一個函數。 
這個被返回的函數在再次被調用的時候執行以下操做: 

1.使用apply方法將調用bind方法的函數裏面的this指針替換爲object。 
2.將傳遞到這個匿名函數裏面的參數轉換爲數組，與args數組組合造成一個新的數組，傳遞給__method方法。 
var args = Array.prototype.slice.call(arguments)將這條代碼簡寫來看能夠成爲這樣[].slice.call(arguments);可是這樣會給內存裏增長一個空的數組對象，爲了容易閱讀點在簡化能夠把它假當作爲這樣的形式slice.call(arguments)，去掉call能夠假當作爲這樣的形式function slice(arguments){….}，其實在slice就是一個爲全部數組定義好的prototype方法而已它與咱們自定義的原型方法不一樣的是，它是javascript爲開發者預先定義好的內置方法，他只能被數組調用。在編輯器裏面alert(Array.prototype.slice)以後獲得的就是funciton slice(){…}。 

既然slice也只是一個普通函數方法，slice.call(object)這樣讓slice裏面的this臨時的被替換一下也是能夠的。就如[].slice(){..}裏面的this指針會指向調用slice方法的數組對象同樣。使用call方法或apply方法能夠將調用此方法的對象內的this指針臨時性的改變爲傳遞參數中的第一個參數，這一切都是臨時性的，它會在函數執行完畢內存釋放後重置。 
var object=args.shift()將數組中的[0]位置的對象保存到object變量，這個object就是要被替換的指針。 

 

默認你已經知道es6箭頭函數的自動綁定context功能，咱們接下來學習react的狀態函數還有refs.

上圖粗粗一看，React組件在它的lifecycle下，有3個總狀態：mounting, mounted, 和unmounting. 

 

他們有相應的方法：