在React中使用es6写法

最开始接触React时是因为阮一峰的React 入门实例教程，里面没有使用到es6的写法，但是现在网上的大部分React代码都是使用es6写法，在此记录一些常用的写法，记录下来，方便以后会用到。

1. 创建组件

原始写法：

var HelloComponent= React.createClass({
  render: function() {
    return (
      <p>Hello World</p>
    );
  }
});

es6写法：

class HelloComponents extends React.Component{
  render(){
    return (
      <p>Hello World</p>
    );
  }
}

2. 初始化state

原始写法：

var HelloComponent= React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  render: ...
  }
});

es6写法：

class HelloComponent extends React.Component{
  constructor(){
    this.state = {
      liked: false
    }
  }

  render()...
}

3.初始化props

原始写法：

var HelloComponent= React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: ...
  }
});

es6写法：

class HelloComponent extends React.Component{
  constructor()...
  
  static defaultProps = {
    title : 'Hello World'
  }

  render()...
}

//或者在HelloComponent外面进行设置：
HelloComponent.defaultProps = {
  title : 'Hello World'
}

4. 点击事件

原始写法：

var LikeButton = React.createClass({
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

es6写法：

class LikeButton extends React.Component{
  constructor(){
    this.handleClick = this.handleClick.bind(this);
  }

  /**
    注意：如果需要在点击事件中使用React的state或者是props，就需要
    将方法的this进行bind操作
    */
  handleClick(){
    this.setState({liked: !this.state.liked});
  }

  render(){
    this.setState({liked: !this.state.liked});
    return (<p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>);
  }
}

或者

class LikeButton extends React.Component{
  /**
    注意：如果需要在点击事件中使用React的state或者是props，就需要
    将方法的this进行bind操作
    */
  handleClick(){
    this.setState({liked: !this.state.liked});
  }

  //也可以在onClick中进行bind(this)
  render(){
    this.setState({liked: !this.state.liked});
    return (<p onClick={this.handleClick.bind(this)}>
        You {text} this. Click to toggle.
      </p>);
  }
}

5. PropTypes

原始写法：

 var MyTitle = React.createClass({
    propTypes: {
      title: React.PropTypes.string.isRequired,
    },

    render: function() {
      return <h1> {this.props.title} </h1>;
    }
  });

es6写法：

import PropTypes from 'prop-types';
class MyTitle extends React.PropTypes{
  ...
}

MyTitle.propTypes = {
  title:propTypes.string.isRequired
}

该部分和props类似