有了基础的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.

他们有相应的方法:

正式学习 react(三)的更多相关文章

  1. 正式学习React( 三)

    最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周 ...

  2. 正式学习React(五) react-redux源码分析

    磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js export default function shallowEqual(objA, ...

  3. 正式学习React(一) 开始学习之前必读

    为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...

  4. 五分钟学习React(三):纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  5. 正式学习React (七) react-router 源码分析

    学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...

  6. 正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate

    性能优化 每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护.此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈 ...

  7. 正式学习react(二)

    今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...

  8. 正式学习React(四) 前序篇

    预热 redux 函数内部包含了大量柯里化函数以及代码组合思想 柯里化函数(curry) 通俗的来讲,可以用一句话概括柯里化函数:返回函数的函数 // example const funcA = (a ...

  9. 正式学习React(五) Reactjs 的 PropTypes 使用方法

    propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...

随机推荐

  1. js中document的用法

    document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)docume ...

  2. typedef函数指针那些事

    首先来介绍下函数指针: 函数指针是指向函数的指针变量,即本质是一个指针变量. int (*f) (int x); /* 声明一个函数指针 */ f=func; /* 将func函数的首地址赋给指针f ...

  3. C语言超级经典400道题目

    C语言超级经典400道题目 1.C语言程序的基本单位是____ A) 程序行 B) 语句 C) 函数 D) 字符.C.1 2.C语言程序的三种基本结构是____构A.顺序结构,选择结构,循环结 B.递 ...

  4. Windows7里的“计算器”你真的会用吗?

    “计算器”是不同Windows版本中的必备工具,虽然功能单一,但的确是人们日常工作中不可缺少的辅助工具,本文就来谈谈它的使用. 一.标准型和科学型两种面板 我们既可从Windows附件菜单中启动它,也 ...

  5. ListView与CheckBox组合实现单选

    main.xml配置文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  6. POJ3026(BFS + prim)

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10554   Accepted: 3501 Descri ...

  7. iphone6闪存检测

    iPhone6自从发布以后一直又不少的诟病和非议,比如一机难求,容易掰弯,程序崩溃等, 甚至传出了苹果将要召回这些问题设备,最近有人终于查出了iPhone6安装大量程序后崩溃的原因,原因就是大容量的i ...

  8. DataReader、Table、DataSet和Entity相互转化

    public class CommonService { #region DataReader转化 /// <summary> /// 将DataReader转化为Table /// &l ...

  9. TRIZ系列-创新原理-32-改变颜色原理

    改变颜色原理的详细描写叙述例如以下:1)改变物体或其环境的颜色:2)改变物体或其环境的透明度:3)对于难以看到的物体或过程.使用颜色加入剂来观測.4)假设已经使用了这样的加入剂,那么使用发光跟踪或原子 ...

  10. 【DataStructure】Some useful methods about linkedList(二)

    Method 1: Add one list into the other list. For example, if list1is {22, 33, 44, 55} and  list2 is { ...