正式学习 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个总状态:mountingmounted, 和unmounting

 

他们有相应的方法:

 

posted @ 2016-11-19 18:16  hdu胡恩超  阅读(141)  评论(0编辑  收藏  举报