[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方法