使用ES5开发转入ES6开发主要注意以下6个部分：
1.React Native组件导入
使用ES5语法时，我们使用代码1-1来导入React Native组件
代码1-1
let React = require('react-native');AD
let{
AppRegistry,
StyleSheet,
Text,
View
}=React;使用ES6语法时，需要将1-1代码改为1-2的形式（注意：开发者需要多导入一个Component组件）
代码1-2
import React ,{
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';开发者使用ES5语法创建自己的React Native组件时，代码片段如1-3所示
代码 1-3
let Demo = React.createClass({
}),
使用ES6语法时，需要改为1-4的形式(注意，代码1-4以反大括号结束，不需要ES5最后结尾的反小括号和逗号。）
代码1-4
class Demo extends Component{
.....
}2.属性声明
使用ES5语法声明属性和指定属性认定默认值，写法代码如1-5所示。
代码1-5
var Demo = React.createClass({
propTypes:{
aStringProp:React.PropTypes.string
},
getDefaultProps:function () {
return { aStringProp:'default value'};
}
...
});
...使用ES6语法时，需要将代码1-5修改为代码1-6的形式
(注意：在ES6语法中，属性的类型声明和默认声明不像ES5语法那样在组件内部声明，而是在组件定义外部声明。
代码1-6
var Demo extends Component{....}
Demo.propTypes={
aStringProp:React.PropTypes.string
};
Demo.getDefaultProps={
aStringProp:'default value'
};3.成员变量声明
使用ES5语法时，在React Native组件的成员变量声明如代码1-7所示
代码1-7
let Demo = React.createClass({
_myProperty1:'test',
_myProperty2:true,
})使用ES6语法编写React Native组件时，可以为React Native组件指定一个构造函数，而声明React Native组件的成员变量必须在组件的构造函数中声明。代码1-7需要改为代码1-8
代码1-8
var Demo extends Component {
constructor(props) { //组件构造函数名称与声明方式，不可修改
super(props); //将属性传递给父类构造函数，必须有这句，不可修改
this. _myProperty1='test'; //声明成员变量
this._myProperty2=true; //声明成员变量
}使用ES6语法编写React Native组件函数时函数名称不能再有":function"关键字，不同于使用ES5语法编写时可有可无这个关键字。
4.状态机变量声明
使用ES5语法时，React Native组件的状态机变量声明如代码1-9所示
代码1-9
let Demo = React.createClass({
getInitialState:function () {
return{
var1:"value of var1",
var2:30,
var3:true
};
}使用ES6编写React Native组件时，React Native组价的状态机变量也必须在组件的构造函数中，改为代码1-10的形式
代码1-10
var Demo extends Component {
constructor(props) { //组件构造函数名称与声明方式，不可修改
super(props); //将属性传递给父类构造函数，必须有这句，不可修改
this.state = { //声明状态机变量
var1:"value of var1",
var2:30,
var3:true
};
}5.类的静态成员变量与静态成员函数
使用ES5语法进行React Native开发时，类的静态成员变量与静态成员函数的实现代码如图1-11
代码1-11
static :{
_myStaticObject:'init value', //定义类的静态成员变量
myStaticMethod: function () { //定义类的静态成员函数
console.log('hell nana')
}
},
render:function(){
console.log(Demo._myStaticObject);// 访问类的静态成员变量
Demo._myStaticMethod(); //调用类的静态成员函数
}使用ES6开发时，相应的实现如代码1-12所示
代码1-12
class Demo extends Component{
static myStaticObject = 'init value'; //定义类的静态成员变量
static myStaticMethod(){ //定义类的静态成员函数
console.log('hell nana');
}
}
...
render(){
console.log(Demo._myStaticObject);// 访问类的静态成员变量
Demo._myStaticMethod(); //调用类的静态成员函数
}6.回调函数绑定
使用ES5语法时，React Native组件的回调函数可以直接指向本组件的某个成员方法。如代码1-13所示
代码1-13
let Login =React.createClass({
getInitialState:function(){
return{
inputedNum:'',//初值是空字符,getInitialState函数声明需要用到的状态机变量，
};
},
updateNum:function(newtText){ //这个成员方法将被用作回调函数
this.setState((state)=>{
return{
inputedNum:newtText,
};
});
},
buttonPressed:function() { //这个成员方法将被用作回调函数
...
},
render:function() {
return (
<View style={styles.container}>
<TextInput style={styles.numberInputStyle}
placeholder={'请输入手机号'}
onChangeText={(newText)=>this.updateNum(newText)}/> //指定第一个回调函数
<Text style={styles.textPromptStyle}>
onPress={this.buttonPressed} //指定第二个回调函数
</Text>
</View>
);
},
});使用ES6语法编写React Native组件时，React Native组件的回调函数必须在组件的构造函数中执行绑定操作，代码1-12需要改为代码1-14
代码1-14
class Login extends Component{
constructor(props) {
super(props);
this.state = {
inputedNum: ''
};
//下面两条语句将两个回调函数和成员方法绑定
this.updateNum = this.updateNum.bind(this);
this.buttonPressed = this.buttonPressed.bind(this);
}
updateNum(newtText){
this.setState((state)=>{
return{
inputedNum:newtText,
};
});
}
buttonPressed:function() {
...
render() {
return (
<View style={styles.container}>
<TextInput style={styles.numberInputStyle}
placeholder={'请输入手机号'}
onChangeText={(newText)=>this.updateNum(newText)}/>
<Text style={styles.textPromptStyle}>
onPress={this.buttonPressed}
</Text>
</View>
);
}
}7.导出单个类
在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出，如代码1-15所示
代码1-15
var MyComponent = React.createClass({
...
});
module.exports = MyComponent;在ES6里，通常用export default来实现相同的功能，如代码1-16所示
代码1-16
export default class MyComponent extends Component{
...
}
引用的时候也类似：
//ES5
var MyComponent = require('./MyComponent');//ES6
import MyComponent from './MyComponent';注意导入和导出的写法必须配套，不能混用！