React中ES6和ES5的不同之处

组件类的定义

es5

var ComponentES5 = React.createClass({//类名首字母要大写
      render:function(){
        return(<div></div>) 
      }
  })

es6

  class ComponentES6 extends React.Component{
      render(){
        return(<div></div>) 
      }
  }

状态初始化

es5

var ComponentES5 = React.createClass({
getInitialState: function() {
  return {aipp:true};
},
render:function(){
  return(<div></div>)
}

})

es6

class ComponentES6 extends React.Component{
  constructor(props) { 
    super(props);
    this.state = {aipp:true};
  }//此处不加逗号
  render(){
    return(<div></div>) 
  }
}

属性初始化

es5

var ComponentES5 = React.createClass({
  getDefaultProps: function() {
    return {aipp:true};
  },
  render:function(){
    return(<div></div>) 
  }
})

es6

class ComponentES6 extends React.Component{
  <em>//第一种方法：标示static定义在class内</em>
  static defaultProps = {aipp:true }
  render(){
    return(<div></div>) 
  }
}
<em>//第二种方法：利用组件名，定义在class外</em>
ComponentES6.defaultProps = {aipp:true}

</code>

组件抛出

es5

  module.exports = ComponentES5;

es6

  export default ComponentES6;//export不加s

事件绑定

es5

  var ComponentES5 = React.createClass({
    clickHandle:function(){
      alert('aipp');
    },
    render：function(){
      <div><input type="button" onClick={this.clickHandle}/></div>
    }  
  })

es6

  class ComponentES6 extends React.Component{
    clickHandle(){
      alert('aipp')
    }
    render(){
      <div><input type="button" onClick={this.clickHandle.bind(this)}/></div>
        //需要加上bind(this)
    }
  }

<h1>待更新……</h1>