React中ES6和ES5的不同之处

组件类的定义

es5

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

es6

  class ComponentES6 extends React.Component{
      render(){
        return(
) 
      }
  }

状态初始化

es5

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

})

es6

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

属性初始化

es5

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

es6

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

组件抛出

es5

  module.exports = ComponentES5;

es6

  export default ComponentES6;//export不加s

事件绑定

es5

  var ComponentES5 = React.createClass({
    clickHandle:function(){
      alert('aipp');
    },
    render：function(){
      

    }  
  })

es6

  class ComponentES6 extends React.Component{
    clickHandle(){
      alert('aipp')
    }
    render(){
      

        //需要加上bind(this)
    }
  }

待更新……