React组件的ES5和ES6写法

1、HTML部分

2、JS部分之ES5写法

3、JS部分之ES6写法

4、ES6继承
Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。下面,我们在ColorPoint内部加上代码。

上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。
子类如果有constructor方法,那么必须在constructor方法中调用super方法,如果不调用super方法,子类就得不到this对象。
ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面。ES6 的实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
子类如果没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。

另一个需要注意的地方是,在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。

上面代码中,子类的constructor方法没有调用super之前,就使用this关键字,结果报错,而放在super方法之后就是正确的。
最后,父类的静态方法,也会被子类继承。
来源:http://es6.ruanyifeng.com/#docs/class-extends

附React ES5双向绑定

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

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

赶紧努力消灭 0 回复