react定义组件的方法有哪些？区别是什么？

react定义组件的方法有哪些？区别是什么？

函数定义组件

函数定义一个组件是一个无状态组件

        // 没有数据 无状态组件
        function Parent(){
            return <div>1111
            {/*组件之间的嵌套*/}
                <Child card="郭优秀" />
            </div>
        }
        //组件之间的的传值  用props 属性
        function Child(props){
            console.log(props)
            return <div>2222------{props.card}  </div>
        }
        ReactDOM.render(
            <div>
                {
                    <Parent/>
                }
            </div>,

            document.getElementById('app')
        )

注意事项:
- 名称大写
- return返回内容
- 必须有根元素

es6 React.component 定义组件

class定义的组件是一个有状态的组件(有自己数据的就是有状态组件)

    class Child2 extends React.Component{
        render(){
            return(
                <div>
                    2222
                    {/*把要传递的值存储在  localStorage中  */}
                    {window.localStorage.setItem("site",this.state.num)}
                </div>
            )
        }
        constructor(){
            super()
            // 有这个都是有状态组件
            this.state={
                num:6
            }
        }
    }

es5 React.createClass定义的组件

es5原生方式 定义的组件是一个有状态组件 不过现在不常用了 因为是通过es6新增class的属性创建的组件较为创建简单,相对于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>
        );
    }
});