正式学习 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.

他们有相应的方法:

时间: 12-07

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

正式学习React( 三)

最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的变化.组件本质上是状态机:对于特定的输入,它总会返回一致的输出. ???????React为每个组件提供的生命周期分三个阶段:  一.实例化: getDefaultProps:组件初次实例化创建(不管是否成功)才会被调用,

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

性能优化 每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护.此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的. 避免直接作用于DOM react实现了一层虚拟dom,它用来映射浏览器的原生dom树.通过这一层虚拟的dom,可以让react避免直接操作dom,因为直接操作浏览器dom的速度要远低于操作Jav

正式学习react(二)

今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css 讲了module.loaders下关于 css的写法: module: { loaders: [ // Extract CSS during build { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css'), include: paths } ]}, 还讲了

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

磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js 1 export default function shallowEqual(objA, objB) { 2 if (objA === objB) { 3 return true 4 } 5 6 const keysA = Object.keys(objA) 7 const keysB = Object.keys(objB) 8 9 if (keysA.length !== keys

正式学习 react(一)

先安装点东西吧: atom,iis,nodejs环境. iis安装方法:点击

正式学习React(四) ----Redux源码分析

今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js 1 import isPlainObject from 'lodash/isPlainObject' 2 import $$observable from 'symbol-observable' 3 4 /** 5 * These are private action types reserved by Redux. 6 * For any unkno

Windows API 编程学习记录<三>

恩,开始写API编程的第三节,其实马上要考试了,但是不把这节写完,心里总感觉不舒服啊.写完赶紧去复习啊       在前两节中,我们介绍了Windows API 编程的一些基本概念和一个最基本API函数 MessageBox的使用,在这节中,我们就来正式编写一个Windows的窗口程序. 在具体编写代码之前,我们必须先要了解一下API 编写窗口程序具体的三个基本步骤:             1. 注册窗口类:             2.创建窗口:             3.显示窗口: 恩,

VSTO学习笔记(三) 开发Office 2010 64位COM加载项

原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(Automation Executables) 2.Office加载项(COM or Excel Add-In) 3.Office文档代码或模板(Code Behind an Office Document or Template) 4.Office 智能标签(Smart Tags) 本次我们将学习使

linux学习第三周总结

linux学习第三周总结 学习linux的第三周,也是惊喜最多的一周,让我看到学linux并不是很枯燥,相反非常有趣,可玩性很多,但越深入越觉得可学习的地方有很多,也有非常多的不足,所以革命尚未成功,同志更需努力 同样来简单终结一下本周的重点,内容比较多,说要简单提一下,不做详解 一.shell脚本编程基础 内容:1. 编程基础 2. 脚本基本格式3. 变量4.运算5.条件测试6.条件判断if 7.条件判断case 8.配置用户环境 shell脚本:包含一些命令或声明,并符合一定格式的文本文件