1、使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component。另外react 0.13之后props必须是不可变的。

2、用ES6 class语法创建组件,其内部只允许定义方法,而不能定义属性,class的属性只能定义在class之外。所以propTypes要写在组件外部。

3、getDefaultProps方法,由于props不可变,所以现在被定义为一个属性,和propTypes一样,要定义在class外部。

4、使用ES6 class语法创建组件,初始化state的工作要在constructor中完成。不需要再调用getInitialState方法。这种语法更加的符合JavaScript语言习惯。

5、使用ES6 class语法创建组件, class中的方法不会自动将this绑定到实例中。必须使用 .bind(this)或者 箭头函数 =>来进行手动绑定。

6、使用ES6语法来创建组件是不支持React mixins的,如果一定要使用React mixins就只能使用React.createClass方法来创建组件了。

es6语法重构react代码的更多相关文章

  1. 让浏览器兼容ES6语法(gulp+babel)

    使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...

  2. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  3. [ES6]react中使用es6语法

    前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...

  4. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  5. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  6. es6语法快速上手(转载)

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...

  7. 35.ES6语法介绍——2019年12月24日

    2019年12月24日16:22:24 2019年10月09日12:04:44 1. ES6介绍 1.1 新的 Javascript 语法标准 --2015年6月正式发布 --使用babel语法转换器 ...

  8. es6 语法使用

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...

  9. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

随机推荐

  1. 几次接触Collection排序使用总结

          初次接触Collection.sort()就是由鞠老师的作业4了解的,因为根据课程安排,这学期才开设java基础课,所有需要用到的的东西全是自学.而那次作业带给我最直观的感受就是:单纯的去 ...

  2. UI基础:DataPersistent.沙盒

    沙盒是系统为每一个应用程序生成的一个特定文件夹,文件夹的名字由一个十六进制数据组成,每一个应用程序的沙盒文件名都是不一样的,是由系统随机生成的. 沙盒主目录: NSString *homePath = ...

  3. HDU 4927

    http://acm.hdu.edu.cn/showproblem.php?pid=4927 直接模拟会超时,要在纸上写写推公式 A[n]*C(0,n-1)  - A[n-1]*C(1,n-1) + ...

  4. linxu c语言 fcntl函数和flock函数区别 【转】

    flock和fcntl都有锁的功能,但他们还有一点小小的区别: 1.flock只能加全局锁,fcntl可以加全局锁也可以加局部锁. 2.当一个进程用flock给一个文件加锁时,用另一个进程再给这个文件 ...

  5. LeetCode Permutations II (全排列)

    题意: 给出n个元素(可能有重复的),请产生出所有的全排列. 思路: 同版本1的有点不同,这次有可能含有重复的元素,很容易就TLE,节省时间才是关键点. 如果将一个序列中两个相同的元素交换,这个序列是 ...

  6. 【转】7 Tips to Speed Up Eclipse

    技巧一:运行最新版本的JDK和Eclipse 通常,新版本的JDK和Eclipse都会有性能上的优化.请确保你使用的是64位Eclipse并且使用了Oracle的JDK.对于网络开发,需要使用Ecli ...

  7. UVa 11729 - Commando War

    [题目翻译]: 题目分析:因为任务是可以并行的执行,所以直觉上是花费时间长的任务优先去部署.但是这到题目还给你交待任务的时间,所以容易让人想多了. 不管有没有交待任务的时间,对于任务x和y,只可能有两 ...

  8. ui学习笔记---第十五天数据库

    数据库的使用 常见的数据库有MySQL       SQL Server       SQLite      Oralce等 在iOS开发中通常使用SQLite数据库,这是一个轻量级的数据库,可以在火 ...

  9. 解读vmstat中的ACTIVE/INACTIVE MEMORY

    vmstat 命令能够报告关于内核线程.虚拟内存.磁盘.陷阱和 CPU 活动的统计信息,那么我们又该如何理解其工作原理呢? vmstat -a 命令能看到active memory 和 inactiv ...

  10. break、continue与return见的区别

    比较简单的说法就是: 1.break:跳出当前的循环体 2.continue:跳出本次的循环 3.return:返回调用函数(也就完全的跳出了函数块) 好,下面就是我的代码练习君了: package ...