1.无状态函数式组建

无状态函数式组件，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层。

举个例子

//顶层代码import React,{Component} from 'react';  import ReactDOM from 'react-dom';  import Button from './component/props'    ReactDOM.render(      
    
          
           
    
      ,  document.getElementById('body')  )  //底层代码import React,{Component} from 'react';  export default  function Button(props){      let {name} = props      const sayHi = () => {          alert(`Hi ${name}`);      }      return (          
    
              
     
Hello, {name}
              
     Say Hi          
    
      )  }

2. es5原生方式（React.createClass）

React.createClass 是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件

举个例子

const Button = React.createClass({      propTypes: {         //②属性类型        name: React.PropTypes.string    },    defaultProps: {     //③属性默认值        name: ''    },    getInitialState: function() {  //①初始状态        return {            name: this.props.name|| 'name'        };    },    sayHi() {        alert(`Hi ${name}`);      }    render() {      return (        
    
            
     
Hello, {name}
            
     Say Hi          
    
      );    }});

3.继承React.Component（ES6形式）

React.Component 是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式。

举个例子

export default class Button extends React.Component {    static propTypes = {       //②属性类型        name: React.PropTypes.string    };    static defaultProps = {   //③属性默认值        name: ''    };    constructor(props) {        super(props);        this.state = { ①初始状态            name: props.name|| 'name'        };        // ES6 类中函数必须手动绑定        this.sayHi= this.sayHi.bind(this);    }    sayHi() {        alert(`Hi ${name}`)    }    render() {      return (        
    
            
     
Hello, {name}
            
     Say Hi          
    
      );    }}

React.createClass 与 React.Component 两种方法的区别

1. React.createClass 创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.mothod即可，函数中的this会被正确设置。

React.Component 创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

绑定this的方法：

    ①.this.sayHi= this.sayHi.bind(this); //构造函数中绑定(construtor)

    ②.<div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定

    ③.<div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定

2.初始化状态定义，对应代码中①的位置

3.初始化属性类型，对应代码中②的位置

4.初始化属性值，对应代码中③的位置