React组件的ES5和ES6写法

1、HTML部分

2、JS部分之ES5写法

3、JS部分之ES6写法

4、ES6继承:Class 可以通过extends关键字继承类的所有属性和方法。

上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。子类如果有constructor方法,那么必须在constructor方法中调用super方法,如果不调用super方法,子类就得不到this对象。
如果不需要传参就能获取实例,那么子类就不用定义constructor方法,否则就应该定义 constructor方法,就是说,不管有没有显式定义,任何一个子类都有constructor方法。
ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面。
ES6 的继承,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
来源:http://es6.ruanyifeng.com/#docs/class-extends

附React ES5双向绑定

Babel:是编写下一代JavaScript的编译器。通过安装插件(plugin)或预设(preset,就是一组设定好的插件)来编译代码的,支持es6和jsx。代码编译工具。
ESlint:提供一个完全可配置的检查规则,提供了许多第三方插件。输出的错误信息也非常明晰,支持es6和jsx。ESLint 这样的可以让程序员在编码的过程中发现问题。代码检查工具。
loaders:用来预处理文件,打包除 JavaScript 之外的任何静态资源。代码加载器。
三、ES6的类和实例
1、在类中定义的方法,是实例的方法,会被实例调用。相当于ES5中实例的原型。
2、在类中定义的方法前,加上static,那么该方法就是静态方法即类本身的方法,通过类名.aaa来调用,方法里面的this指的是类而不是实例,方法不会被实例调用,方法可以被子类继承;
3、在类中定义的属性,是实例的属性,会被实例获取,直接赋值,不需要“var”和“this.”。在ES5中,只能用“this.”写在类的构造函数里面。
4、在类中定义的属性前,加上static,那么该属性就是静态属性即类本身的属性,通过类名.aaa来获取。在ES5中,只能写在类的外部。
来源:http://es6.ruanyifeng.com/#docs/class
来源:https://blog.csdn.net/haoshidai/article/details/52244620

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复