1.函数式无状态组件 

2.es5方式React.createClass组件 

3.es6方式extends React.Component

 

1.函数式无状态组件

    语法:

    

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

2.es5方式React.createClass组件

   语法:

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型        
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象       
         initialValue: " "
     },
    // 设置 initial state    
    getInitialState: function(){//组件相关的状态对象        
        return {
            text: this.props.initialValue || 'placeholder'      
         };
    },
    handleChange: function(event){
        this.setState({ //this represents react component instance       
             text: event.target.value
        });
    },
    render: function(){
        return (
           <div>
                Type something:
                    <input onChange={this.handleChange} value={this.state.text} />
            </div>
            );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ''
};

3.es6方式extends React.Component

class InputControlES6 extends React.Component{
    constructor(props) {
        super(props);
        // 设置 initial state       
            this.state = {
                text: props.initialValue || 'placeholder'        
            };
        // ES6 类中函数必须手动绑定        
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
           <div>
                Type something:
                   <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: " "
};

区别:

    无状态组件无法进行数据的操作 es5的它是利用function模拟class的写法做出来的es6 是通过es6新增class的属性创建的组件此组件创建简单