一、创建组件
开发者使用 ES 6语法创建自己的 React Native 组件时,代码片段如代码 B-1-1所示。
代码 B-1-1：
class LearnRN extends Component{
......
}
使用 ES 5语法时，需要将代码 B-1-1修改为代码 B-1-2的形式
代码 B-1-2
let LearnRN = React.createClass({
......
}),
注意,代码 B-1-1 以反小括号和逗号结束。
二、成员变量声明
使用 ES 6语法编写 React Native 组件时，可以为 React Native 组件指定一个构造函数，而组件的成员变量通常在组件的构造函数中声明。如代码 B-2-1。
代码 B-2-1:
class LearnRN extends Component{
constructor(props){ //组件构造函数名称与声明方式,不可修改
super(porps); //将属性传给父类构造函数,必须有这句,不可修改
this.myProperty1 = 'text'; //声明成员变量
this.myProperty2 = true; //声明成员变量
}
}
使用 ES 5语法时, React Native 组件的成员变量声明如代码 B-2-2所示.
代码 B-2-2:
let Project1 = React.createClass({
_myProperty1:'text',
_myProperty2:true,
}),
组件的函数也是一种成员变量。使用 ES 6语法编写 React Native 组件时函数名称后不能有“.function” 关键字,而使用 ES 5语法编写时可以有种鸽关键字。并且 ES 5语法中，每个函数都需要以逗号结尾（最后一个函数可以没有逗号），就像两个成员变量之间以逗号分隔一样。
三、状态机变量声明
使用ES 6语法编写 React Native 组件时，React Native 组件的状态机变量通常在组件的构造函数中声明，如代码 B-3-1。
代码 B-3-1：
class LearnRN extends Component{
constructor(props){ //组件构造函数名称与声明方式,不可修改
super(porps); //将属性传给父类构造函数,必须有这句,不可修改
this.state = {
var1:'value of var1',
var2:30,
var3:true,
};
}
}
使用 ES 5语法时,不支持 constuctor 构造函数。需要使用 geiInitalState 函数，并且返回状态机变量。ES 5 写法如大妈 B-3-2所示。
代码 B-3-2:
let Project18 = React.createClass({
geiInitalState:function(){
return{
var1:'value of var1',
var2:30,
var3:true,
};
},
}),
四、属性声明
使用 ES 6 语法时，属性声明的语句如代码 B-4-1 所示。
代码 B-4-1:
......
class LearnRN extends Component{
...
}
LearnRN.propTypes={
aStringProp:React.PropTypes.string,
};
LearnRN.defaultProps = {
aStringProp:'default value'
};
使用 ES 5 语法时，他们的写法如代码 B-4-2 所示。
代码 B-4-2:
var LearnRN = React.createClass({
propTypes:{
aStringProp:React.PropTypes.string,
},
getDefaultProps:function(){
return{
aStringProp:'default value'
};
}
}),
注意,在 ES 5语法中,属性的类型声明和默认值声明不像 ES 6 语法那样在组件定义外部声明,而是在组件定义内部声明。
五、静态变量与静态成员函数
使用 ES 6 语法开发,静态变量与静态成员函数的实现如代码 B-5-1。
代码 B-5-1:
class LearnRN5 extends Component{
static myStaticObject = 'init value'; //定义类的静态成员变量
static myStaticMethod(){ //定义类的静态成员函数
console.log('myStaticMethod is called');
}
......
render(){
console.log(LearnRN5.myStaticObject); //访问类的静态成员变量
LearnRN5.myStaticMethod(); //调用类的静态成员函数
}
......
}
使用 ES 5语法进行 React Native 开发时,类的静态成员变量与静态成员函数的实现如代码 B-2-2所示。
代码 B-5-2:
......
statics:{
_myStaticObjext:'init value',
myStaticMethod:function(){
console.log('myStaticMethod is called');
}
},
render:function(){
console.log(LearnRN5.myStaticObject);
LearnRN5.myStaticMethod();
}
六、成员函数绑定
使用 ES 6语法进行开发时，需要对回调函数进行绑定，否则回调函数不在运行在正确的上下文中。在使用ES 5语法时，React Native 组件的回调函数不需要绑定。React 类的 creatClass方法为开发者代劳了这一步操作。
