react与es6的结合

一） 构造函数方面：

      es5：React.createClass({...});

      es6:  class A extends React.Component{

                   constructor(){

                                 ......

                                 super();

                                 ......

                           }

                      }

二）属性方面：

es5：React.createClass({

                getDefaultProps:function(){

                               return {.......}

                       }

           });

es6:  class A extends React.Component{.......}

          A.defaultProps={.....}

三） 状态类型：

es5：React.createClass({

             getInitialState:function(){......}

          })

es6：class A extends React.Component{

                constructor(){

                   ....

                   this.state={.......}

                   .....

             }

         }

ps：this.setState方法不变；

四）属性类型方面：

es5：React.createClass({

                                    propTypes:{........}                       

         })

es6：class A extends React.Component{ }

          A.propTypes={};

 五）事件函数中的this的指向；

es5：this是指向组件；

React.createClass({

                   hand:function(){}

                   render:function(){

                      return{

                            </p onClick={this.hand}></p>

                         }

                  }

             });

es6：在es6中，this必须有外界的提供，所以调用时传入他this

class A extends React.Component{

       constructor(){

            super();

       }

       hand(){

            this.setState(Object);

       }

       render(){

            return <p onClick={this.hand.bind(this)} ></p>

      }

}

七），ref在es6中是一个函数，其中参数就是该对象的引用；

  class A extends React.Component{

     hands(){

       this.p.setState();

   }

     render:function(){

           return <p ref={(ele)=>{this.p=ele}}></p>

        }

}

(以上的例子不需要考虑是否书写合理)