[ES6]react中使用es6語法

前言

不管是React仍是React-native，facebook官方都推薦使用ES6的語法，沒在項目中使用過的話，忽然轉換過來會遇到一些問題，若是尚未時間系統的學習下ES6那麼注意一些常見的寫法暫時也就夠用的，這會給咱們的開發帶來很大的便捷，你會體驗到ES6語法的無比簡潔。下面就介紹我在react和react-native中從ES5轉到ES6中體會到的幾個對比。

ES6寫組件的區別

直接在React v0.13.0 Beta 1中一個官方的演示來講明：

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

和React.createClass方法來建立組件對比一下：

const Counter = React.createClass ({
  getDefaultProps : function () {
    return {
      initialCount : 0
    };
  },
  propTypes: {
   initialCount: React.PropTypes.number
  },
  
  getInitialState: function() {
    return { count:  this.props.initialConunt};
  },
  tick: function() {
    this.setState({count: this.state.count + 1});
  },
  render: function() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
})

主要有三個區別：

建立組件的方法

用class聲明來取代了React.createClass，這裏簡潔了許多。

props

1. ES6中須要用在constructor中有super(props)來傳遞props。
2. ES6中getDefaultProps是class的屬性而不是方法，不能定義在組件內部，須要單獨寫在外面。
3. 同理，ES6中propTypes也須要寫在外面。

state

ES6不在須要getInitialState方法，而是直接在constructor中直接用this.state便可，更加方便。

this的綁定

這段代碼採用了ES6後其中onClick={this.tick.bind(this)這裏須要採用bind方法來綁定this，若是不綁定this，this.tick方法的this就會指向全局，綁定了this以後將this綁定到組件實例之上。可是咱們應該還記得js中bind方法每運行一次就返回一個新的函數，在react中也就是每次render都會建立一個新的函數，因此咱們最好將其綁定constructor中：

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

這樣只會建立一次。固然這樣寫略顯繁瑣，有沒有更好的方法呢？ 固然！ ES6爲咱們提供了箭頭函數，根本不須要在綁定this這種操做了。

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick = () => {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

箭頭函數不會建立自身的this上下文，this就指向組件實例。建議就用箭頭函數，代碼會精簡不少。

總結

知道這幾點區別之後，再去找個教程熟悉下ES6的語法，基本就能夠用ES6來寫react了，感受js的標準愈來愈向java和python等靠近，前端後端都要融合了哈哈。

參考

1. react中this
2. bind方法