创建一个无状态的组件

let ReactClass = React.createClass({
    render: ()=>{
        return React.createElement('h1',{className:'header'},'React Component')
    }
});


let reactComponentElement = React.createElement(ReactClass);
let reactComponent = ReactDOM.render(reactComponentElement), document.getElementById('react-application'));

创建组件就是三个步骤

1. 调用React.createClass()创建一个组件类ReactClass，参数是一个对象，定义组件。render方法是必须
2. 调用React.createElement(ReactClass) ，创建一个reactComponentElement。ReactClass作为type参数
3. 调用ReactDOM.render()渲染组件

组件状态的一种设计模式

1. 状态不要直接保存在render()中
2. 尽可能保持一些React组件无状态。
   3.组件的两个关注点：如何处理页面交互逻辑和如何呈现数据。
3. React组件是可以分层的，少数有状态的组件应该为位于层级的顶部。它们封装了所有的交互逻辑，管理用户页面状态，然后使用props（之后将使用state）将状态向下传递到无状态的组件。

创建一个有状态的组件

let ReactClass = React.createClass({
    getInitialState:{
        return{
            isHidden :false
        }
    },

    render: ()=>{
        if(this.state.isHidden){
            return null

        }

        return React.createElement('h1',{className:'header'},this.props.header)
    }
});

this.props vs this.state

1. this.props 是一个从父组件传递过来的只读数据，属于父级别，不能被子元素改变。
2. this.state 存储的数据是组件私有的，能被组件修改。并且更新后会自动重新渲染组件。

更新组件state -setState(data,callback)

1. data :表示下一个状态
2. callback：很少用到，因为React已经保证用户界面是最新的了：每次组件状态更新的时候，就会重新调用render函数。

一条经验法则

组件的state应该用来存储组件的事件处理函数随时可能改变的数据