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>
    )
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM