一、創(chuàng)建組件

開發(fā)者使用 ES 6語法創(chuàng)建自己的 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 以反小括號和逗號結(jié)束。

二、成員變量聲明

使用 ES 6語法編寫 React Native 組件時，可以為 React Native 組件指定一個構(gòu)造函數(shù)，而組件的成員變量通常在組件的構(gòu)造函數(shù)中聲明。如代碼 B-2-1。
代碼 B-2-1:

 class LearnRN extends Component{
   constructor(props){   //組件構(gòu)造函數(shù)名稱與聲明方式,不可修改
     super(porps);        //將屬性傳給父類構(gòu)造函數(shù),必須有這句,不可修改
     this.myProperty1 = 'text';   //聲明成員變量
     this.myProperty2 = true;     //聲明成員變量
   }
 }

使用 ES 5語法時, React Native 組件的成員變量聲明如代碼 B-2-2所示.
代碼 B-2-2:

let Project1 = React.createClass({
  _myProperty1:'text',
  _myProperty2:true,
}),

組件的函數(shù)也是一種成員變量。使用 ES 6語法編寫 React Native 組件時函數(shù)名稱后不能有“.function” 關(guān)鍵字,而使用 ES 5語法編寫時可以有種鴿關(guān)鍵字。并且 ES 5語法中，每個函數(shù)都需要以逗號結(jié)尾（最后一個函數(shù)可以沒有逗號），就像兩個成員變量之間以逗號分隔一樣。

三、狀態(tài)機變量聲明

使用ES 6語法編寫 React Native 組件時，React Native 組件的狀態(tài)機變量通常在組件的構(gòu)造函數(shù)中聲明，如代碼 B-3-1。
代碼 B-3-1：

  class LearnRN extends Component{
    constructor(props){   //組件構(gòu)造函數(shù)名稱與聲明方式,不可修改
      super(porps);        //將屬性傳給父類構(gòu)造函數(shù),必須有這句,不可修改
      this.state = {
        var1:'value of var1',
        var2:30,
        var3:true,
      };
    }
  }

使用 ES 5語法時,不支持 constuctor 構(gòu)造函數(shù)。需要使用 geiInitalState 函數(shù)，并且返回狀態(tài)機變量。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 語法那樣在組件定義外部聲明,而是在組件定義內(nèi)部聲明。

五、靜態(tài)變量與靜態(tài)成員函數(shù)

使用 ES 6 語法開發(fā),靜態(tài)變量與靜態(tài)成員函數(shù)的實現(xiàn)如代碼 B-5-1。
代碼 B-5-1:

class LearnRN5 extends Component{
  static myStaticObject = 'init value'; //定義類的靜態(tài)成員變量
  static myStaticMethod(){              //定義類的靜態(tài)成員函數(shù)
    console.log('myStaticMethod is called');
  }
      ......
        render(){
            console.log(LearnRN5.myStaticObject);   //訪問類的靜態(tài)成員變量
            LearnRN5.myStaticMethod();              //調(diào)用類的靜態(tài)成員函數(shù)
            }
        ......
}

使用 ES 5語法進行 React Native 開發(fā)時,類的靜態(tài)成員變量與靜態(tài)成員函數(shù)的實現(xiàn)如代碼 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();
  }

六、成員函數(shù)綁定

使用 ES 6語法進行開發(fā)時，需要對回調(diào)函數(shù)進行綁定，否則回調(diào)函數(shù)不在運行在正確的上下文中。在使用ES 5語法時，React Native 組件的回調(diào)函數(shù)不需要綁定。React 類的 creatClass方法為開發(fā)者代勞了這一步操作。