ES 6语法与ES 5 语法区别

一、创建组件

开发者使用 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方法为开发者代劳了这一步操作。