react事件绑定的几种方式和组件创建的几种方式！事件绑定是组件之间的关系！

react 创建组件的三种方式  
（1） 函数式定义组件（无状态对的组件）精简一个reader方法 提升性能，无法访问this.state,this.ref 只能访问props属性 就是在没有状态的情况下使用函数定义组件
（2）es5创建的方法React.createClass 缺陷是会自绑定函数方法导致不必要的开销！增加代码过时的可能性 不适合高阶组件不太直观
(3)es6的定义组件extends.React.component是react官方推荐的一种方式最终会取代React.createClass的方法
这是dav+antd搭建的项目 默认的写法
 

export default class Test extends React.Component{
     constructor(props){
         super(props);//获取组件的参数可以使用this.props就可以
         this.state = {//状态定义
            name:'test'         
         }
         事件绑定的四种方式：
         
         this.clickbtn1 = this.clickbtn1.bind(this)//在构造函数中使用bing绑定this
         
     }
     clickbBtn1(){
         //事件处理事情
     }
     clickBtn2(){//在调用的时候使用bind绑定this
         //事件处理事情
     }
     clickBtn3(){//调用的时候使用箭头函数绑定this onClick={()=>this.clickBtn3()s}
        //事件处理     
     }
     clickBtn4 = ()=>{//官方绑定事件的四种方法个人比较喜欢第四种是目前的实验性的方法
       //事件处理
     }
     //四种方式的对比：
     方式2和3在
     优点：就是在不需要在定义的constructor里面去定义this.clickBtn2 = this.clickBtn2.bind(this),无状态组件使用比较方便也就是函数式组件
     缺点：每一次调用生成新的实力影响性能，在传入地阶组件的时候组件进行从新的渲染，造成成性能的不必要浪费
     
     方式1：
     优点：在调用的时候不在需要this绑定，只会生成一个实力，在不会多余的生成
     缺点：在不使用state的时候也得需要一个构造函数去绑定this代码较多一些！在使用函数式组价不太方便
     
     方式4：
     优点：利用属性初始化语法，将方法初始化为箭头函数，因此在初始化的时候就绑定this，结合了方法1,2,3的方法
     缺点：需使用bable转译，目前认识实验性语法
     
     总结：
    方式1是官方推荐的绑定方式，也是性能最好的方式。
    方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。
    方式4目前属于实验性语法，但是是最好的绑定方式，需要结合bable转译
     
     reader(){
         return(
             <div>
             <button onClick={this.clickBtn1}>btn1<button>
             <button onClick={this.clickBtn2.bind(this)}>btn2<button>
             <button onClick={()=>this.clickBtn3()}>btn3<button>
             <button onClick={this.clickBtn4}>btn4<button>
             <div>
         )
         
             
     }
}