React中es5与es6写法对比

2017-12-13

1.引入与导出方式不同

//ES5 var React = require(“react”);
//ES6 import React, { Component,
PropTypes } from ‘react

2.导入： ES5使用require导入，而ES6使用了import
//ES5
module.exports = Test;
//ES6
export default Test;

3.创建组件的方式不同
//ES5
var Test = React.createClass( {
………. } );
//ES6
class Test extends Component {
………. }

4.初始化组件属性的方式以及限制组件属性类型的方式不同
//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
};
}

5.初始化方法不同

//ES5
getInitialState: function() {
………..
return {
myState: 10
}
}
//ES6
constructor(props){
super(props);
this.state = {
myState: 10
};
}