Question

如何在ReactNative中使用ES6新语法

Answer 1

1引入与导式同
//ES5
var React = require("react");
//ES6
import React, { Component, PropTypes } from 'react

?0?2 ?0?2导入： ES5使用require导入ES6使用import
//ES5
module.exports = Test;

?0?2
//ES6
export default Test;

?0?2
2创建组件式同
//ES5
var Test = React.createClass( {
..........
} );
//ES6
class Test extends Component {
..........
}

?0?2ES5使用React.createClass() ?0?2括号面需要括号
?0?2ES6定义组件继承自React框架Component(需要导入)需要括号
?0?2
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
};
}

?0?2 ES5通使用propTypes员getDefaultProps实现
?0?2 ES6统使用static员（用ES5）
?0?2
4初始化同
//ES5
getInitialState: function() {
...........
return {
myState: 10
}
}

//ES6
state = {
myState: 10
}

?0?2 ?0?2ES6直接使用state初始化能进行些其运算所经：
constructor(props){
super(props);
this.state = {
myState: 10
};
}

?0?2
5ES5每都需要加逗号且需要用 render: function()写ES6需要加逗号直接用render()直接名字加括号形参