ES5與ES6對比

ES5與ES6對比

1. 模塊引用

   1.在ES5里，引入React包基本通過require進行，代碼類似這樣：

// ES5
var React = require('react');
var { Component, PropTypes } = React;
console.log(Component);

在ES6里，import寫法更為標准.

// ES6
import React, { Component, PropTypes } from 'react';
console.log(Component);

2. 導出單個類

// 在ES5里面，要導出一個類別的模塊用，一般通過module.exports來導出。
var React = require('react');
var MyComponents = React.createClass({
   render: function() {
    return (<div>1111</div>)
   }
});
module.exports = MyComponents;

// 引用如下：
var c1 = require('./MyComponents');

// 在ES6里面 通過export default來導出類
// es6
export default class MyComponent extends Component {
  render() {

  }
}
// 引用如下：
import MyComponent from './MyComponent';

3. 定義組件

// ES5里面， 通過React.createClass來定義一個組件類
// es5
var React = require('react');  
var C1 = React.createClass({
  render: function() {
    return (
      <C2 url='' />
    )
  }
});

// 在ES6里，通過定義一個繼承自React.Component的class來定義一個組件類，像這樣：
var React = require('react'); 
class C1 extends React.Component {
  render() {
    return (
      <C2 url={ this.props.url }/>
    )
  }
}

4. 給組件定義方法

// ES5的寫法
var React = require('react'); 
var C1 = React.createClass({
  componentWillMount: function() {
    
  },
  render: function() {
    return (
      <C2 url={ this.props.url } />
    )
  }
})
// ES6
var React = require('react'); 
class C1 extends React.Component {
  componentWillMount() {

  }
  render() {
    return (
      <div>222</div>
    )
  }
} 

5. 定義組件的屬性類型 和 默認屬性

// 在ES5里，屬性類型和默認屬性分別通過propTypes成員和getDefaultProps方法來實現
var React = require('react'); 
var A = React.createClass({
  getDefaultProps: function() {
    return {
      a: false,
      b: 10,
    };
  },
  propTypes: {
    a: React.PropTypes.bool.isRequired,
    b: React.PropTypes.number.isRequired,
    c: React.PropTypes.string.isRequired,
    d: React.PropTypes.string.isRequired,
  },
  render: function() {
    return (
      <C />
    );
  }
});
// 在ES6里，可以統一使用static成員來實現
var React = require('react'); 
//ES6
class A extends React.Component {
  static defaultProps = {
    a: false,
    b: 10,
  };  
  static propTypes = {
    a: React.PropTypes.bool.isRequired,
    b: React.PropTypes.number.isRequired,
    c: React.PropTypes.string.isRequired,
    d: React.PropTypes.string.isRequired,
  };  
  // 注意這里有分號
  render() {
    return (
      <C />
    );
  } // 注意這里既沒有分號也沒有逗號
}

6. 初始化STATE

//ES5 
var React = require('react'); 
var A = React.createClass({
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops,
    };
  }
})
//ES6
var React = require('react'); 
class A extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}

7. 把方法作為回調提供

//ES5
var React = require('react'); 
var A = React.createClass({
  handleOptionsButtonClick: function(e) {
    this.setState({showOptionsModal: true});
  },
  render: function(){
    return (
      <TouchableHighlight onClick={this.handleOptionsButtonClick}>
          <Text>{this.props.label}</Text>
      </TouchableHighlight>
    )
  }
});

// 在ES6下，你需要通過bind來綁定this引用，或者使用箭頭函數（它會綁定當前scope的this引用）來調用
//ES6

var React = require('react'); 
class PostInfo extends React.Component{
  handleOptionsButtonClick(e){
    this.setState({showOptionsModal: true});
  }
  render(){
    return (
      <TouchableHighlight 
          onPress={this.handleOptionsButtonClick.bind(this)}
          onPress={e=>this.handleOptionsButtonClick(e)}
          >
        <Text>{this.props.label}</Text>
      </TouchableHighlight>
    )
  }
}