react定义组件的方法有哪些？

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的属性创建的组件此组件创建简单