状态:  state

	state在React中非常重要，函数定义定义组件形式，没有状态，只能通过class

加事件:
	注意this

---------------------------------------------
this.setState({状态名字})	 用此函数设置状态，设置完以后，视图会自动更新

计算数，不要 ++
	count++	不好
	count+1	靠谱


this.setState(state,fnCallBack)	fnCallBack是在状态设置成功后才会触发

---------------------------------------------

错误
没有++
并且setState改变数据
<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props){
            super(props);
            //定义
            this.state={
                count:10
            };
        }
        fnClick(){
            this.state.count++;
        }
        render(){
            return (<div>
                <h3>{this.state.count}</h3>
                <button onClick={this.fnClick}>增加</button>
            </div>)
        }
    }

    ReactDOM.render(
        <MyComponent />,
        document.querySelector('#root')
    )
</script>
错误
没有++
<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props){
            super(props);

            //定义
            this.state={
                count:10
            };
        }
        fnClick(){
            this.setState({
                count:this.state.count++
            })
        }
        render(){
            return (<div>
                <h3>{this.state.count}</h3>
                <button onClick={this.fnClick.bind(this)}>增加</button>
            </div>)
        }
    }

    ReactDOM.render(
        <MyComponent />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props){
            super(props);

            //定义
            this.state={
                count:10
            };
        }
        fnClick(){
            //let oldCount = this.state.count;
            this.setState({
                count:this.state.count+1
            })
        }
        render(){
            return (<div>
                <h3>{this.state.count}</h3>
                <button onClick={this.fnClick.bind(this)}>增加</button>
            </div>)
        }
    }

    ReactDOM.render(
        <MyComponent />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props){
            super(props);

            //定义
            this.state={
                count:10
            };
        }
        fnClick(){
            //let oldCount = this.state.count;
            this.setState({
                count:this.state.count+1
            },()=>{
                alert(1);
            })
        }
        render(){
            return (<div>
                <h3>{this.state.count}</h3>
                <button onClick={this.fnClick.bind(this)}>增加</button>
            </div>)
        }
    }

    ReactDOM.render(
        <MyComponent />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class Tick extends React.Component{
        constructor(){
            super();

            this.state={
                time:new Date()
            };

            setInterval(()=>{
                this.setState({
                    time:new Date()
                })
            },1000)
        }
        render(){
            return (<div>
                <h3>时钟</h3>
                <strong>{this.state.time.toLocaleTimeString()}</strong>
            </div>)
        }
    }

    ReactDOM.render(
        <Tick />,
        document.querySelector('#root')
    )
</script>