React创建组件的三种方式及其区别

1. 函数定义式的无状态组件

     创建纯展示组件，只负责根据传入的props来展示，不涉及state的操作。

     无状态函数式组件形式上表现为一个直带有一个render方法的组件类。 

function HelloComponent(props){
   return <div>Hello {props.name}</div>
}
ReacrDom.render(<HelloComponent name="Sebstian"/>,mountNode)

  特点是精简，避免冗余，以及：1.组件不会实例化，整体渲染性能提升

                                                     2.组件不能访问this对象

                                                     3.组件无法访问生命周期的方法

                                                     4.无状态组件只能访问输入的props

2.es5原生方式React.createClass定义的组件

   有状态的组件，会被实例化，可以访问组件生命周期。

   React,createClass会自绑定函数方法导致不必要的性能开销，增加代码过时的可能性

   React.createClass的mixins不够自然，直观。适合高阶组件。

3. es6，React.Component

    与上面的区别：

     A. React.createClass创建的组件，每个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可

         React.Component需要开发者手动绑定this（在构造函数完成绑定；调用时使用bind；使用箭头函数）

     B. React.createClass在创建组件时，有关组件props的属性类型及组建默认的属性会作为组件实例的属性来配置

          React.Component则是作为组建类的属性，也就是所谓的类的静态属性配置的

     C. React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态

          React.Component创建组建是，state是在constructor中像初始化组件属性一样声明的