React ES6与ES5写法的区别
之前一直用的.net开发，react的写法也一直用的ES5的写法，觉得越来越out了，正好在学node，很多都用ES6的写法，就开始总结了一些React的ES6的写法。主要有以下几个方面：
一、组件的创建
ES5(React.createClass)
import React from 'react';
const SkillComponent = React.createClass({
render:function(){
return(
我是技能
)
}
})
export default SkillComponent
ES6(React.Component)
import React, { Component } from 'react';
class SkillComponent extends Component{
render(){
return(
我是技能
)
}
}
export default SkillComponent
二、组件内定义方法
ES5中组件定义方法是
componentDidMount:function(){
},注意，方法结束后必须写','
ES6中组件定义的方法是
componentDidMount(){
};注意，方法后的';'可写可不写；
三、设置默认属性
ES5中默认属性通过 getDefaultProps定义在组件的内部
import React from 'react';
const SkillComponent = React.createClass({
getDefaultProps: function () {
return {
defaultString: '',
defaultArr:[],
defaultObject:{},
defaultBool:true
};
},
componentDidMount:function(){
},
render:function(){
return(
我是技能
)
}
})
export default SkillComponent
ES6中需要通过在constructor构造函数中调用super将props传递给组件 并定义在组件的外部
import React, { Component } from 'react';
class SkillComponent extends Component{
constructor(props) {
super(props);
};
componentDidMount(){
};
render(){
return(
我是技能
)
}
}
SkillComponent.propTypes = {
defaultString: React.PropTypes.string.isRequired,
defaultArr: React.PropTypes.array.isRequired,
defaultObject : React.PropTypes.object.isRequired,
defaultBool:React.PropTypes.bool.isRequired
};
SkillComponent.defaultProps = {
defaultString: '',
defaultArr:[],
defaultObject:{},
defaultBool:true
};
export default SkillComponent
四、初始化状态（state）
ES5中初始化状态通过getInitialState函数定义
import React from 'react';
const SkillComponent = React.createClass({
getInitialState:function(){
return{
dataSource:{}
}
},
render:function(){
return(
我是技能
)
}
})
export default SkillComponent
ES6中初始化状态通过this.state()定义在构造函数内
import React, { Component } from 'react';
class SkillComponent extends Component{
constructor(props) {
super(props);
this.state = {
dataSource: {}
}
};
render(){
return(
我是技能
)
}
}
export default SkillComponent
五、全局变量
ES5中全局变量定义在组件内
import React from 'react';
const SkillComponent = React.createClass({
serialNumAll:null,
render:function(){
return(
我是技能
)
}
})
export default SkillComponent
ES6中全局变量在构造函数constructor()中定义
import React, { Component } from 'react';
class SkillComponent extends Component{
constructor(props) {
super(props);
this.serialNumAll=null,
};
componentDidMount(){
};
render(){
return(
我是技能
)
}
}
export default SkillComponent
六、this的指向
ES5中，React.createClass会把所有的方法都绑定（bind）一遍，在任意地方都可以作为回调函数
import React from 'react';
const SkillComponent = React.createClass({
handleClick:function(){
console.log(this);
},
render:function(){
return(
我是技能
)
}
})
export default SkillComponent
ES6中，在函数调用的时候绑定（this）或运用箭头函数或者绑定在构造函数内部constructor()
import React, { Component } from 'react';
class SkillComponent extends Component{
handleClick(){
console.log(this);
}
render(){
return(
我是技能
)
}
}
export default SkillComponent
import React, { Component } from 'react';
class SkillComponent extends Component{
handleClick = () => {
console.log(this);
}
render(){
return(
我是技能
)
}
}
export default SkillComponentimport React, { Component } from 'react';
class SkillComponent extends Component{
constructor(props) {
super(props);
this.serialNumAll=null,
this.state = {
dataSource: {}
},
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log(this);
}
render(){
return(
我是技能
)
}
}
export default SkillComponent
七、ajax
ES5
findDataSource:function(bdate) {
$.get(WebServiceBaseUrl + '/ProjectManage/ProjectAssessSource?bdate=' + bdate, function (result) {
if (this.isMounted()) {
this.setState({
dataSource: result
});
}
}.bind(this));
},ES6中废弃了isMounted()
findDataSource(busType, busStatus, company, buyDate, serviceLine) {
$.get(WebServiceBaseUrl + '/ProjectManage/ProjectAssessSource?bdate=' + bdate, function (result){
this.setState({
dataSource: result
});
}.bind(this));
};