1,引入与导出方式不同
//ES5 var React = require("react");
//ES6 import React, { Component, PropTypes } from 'react
导入: ES5使用require导入,而ES6使用了import
//ES5 module.exports = Test;
//ES6 export default Test;
2,创建组件的方式不同
//ES5 var Test = React.createClass( { .......... } );
//ES6 class Test extends Component { .......... }
ES5使用React.createClass() 小括号里面需要大括号。
ES6定义组件时继承自React框架的Component(需要导入),只需要一个大括号。
3,初始化组件属性的方式以及限制组件属性类型的方式不同
//ES5 var Test = React.createClass({ getDefaultProps: function() { return { myPro: 10 }; }, propTypes: { myPro: React.PropTypes.number. isRequired } }); //ES6 class Test extends Component { static defaultProps = { myPro: 10 }; static propTypes = { myPro: React.PropTypes.number. isRequired }; }
ES5通常使用propTypes成员和getDefaultProps方法来实现。
ES6可以统一使用static成员。(也可以用ES5方法)。
4,初始化方法不同
//ES5 getInitialState: function() { ........... return { myState: 10 } } //ES6 state = { myState: 10 }
因为ES6直接使用state初始化不能进行一些其它的运算,所以也经常这样:
constructor(props){ super(props); this.state = { myState: 10 }; }
5,ES5中每个方法之后都需要加上一个逗号,而且需要用 render: function()这样的写法。而ES6不需要加逗号,方法也可以直接用render(),直接在名字后加括号和形参。