在React——组件中介绍过组件有两种定义方式：函数形式以及类形式。但是要想在组件中使用state，就必须使用类形式定义组件。
组件中的state是组件私有的，完全由组件自己控制。
使用类形式定义一个Clock组件
class Clock extend React.Component{
constructor(props){
super(props);
this.state = {date:new Date()};
},
render(){
return (
<div>
<h1>Hello,world</h1>
<p>It is {{this.state.date.toLocaleTimeString()}}</p>
</div>
)
}
};
上面的代码中，在构造函数中初始化state
构造函数应该以props作为参数
将Clock组件显示到页面上
ReactDOM.render(<Clock />,document.getElementById('root'));
上面定义的组件会把当前的时间显示到页面上，但是只会显示某一个时刻（组件不会更新）
接下来介绍更新Clock组件
二.组件的生命周期
在Clock组件首次被渲染到页面上，我们想给Clock组件开启一个定时器。当组件从DOM中移除，清除这个定时器。
componentDidMount()钩子函数会在组件输出被渲染到DOM中时调用，如果想给Clock组件设置一个timer这是一个好时机
componentDidMount(){
this.timer = setInterval(() => {
this.tick();
},1000);
}
如果你要存储一些不被用于输出的变量，你可以手动的为类添加额外的字段，没有在render中使用的变量，不应该出现在state中.
可以在componentWillMount()钩子函数中卸载timer
componentWillMount(){
clearInterval(this.timer);
}
接下来实现tick方法，组件的state要使用this.setState()更新
Clock组件的完整代码如下
class Clock extend React.Component{
constructor(props){
super(props);
this.state = {
date:new Date()
};
},
render(){
return (
<div>
<h1>Hello world</h1>
<p>It is {this.state.date}</p>
</div>
)
},
componentDidMount(){
this.timer = setInterval(() => {
this.tick();
},1000);
},
componentWillMount(){
clearInterval(this.timer);
},
tick(){
this.setState({
date:new Date()
});
}
};
将Clock组件渲染到页面上
ReactDOM.render(<Clock />,docoment.getElementById('root'));
这样每隔一秒钟Clock就会被更新
解释上述代码的执行顺序
step1.当<Clock />被传递到ReactDOM.render()中时，Clock组件的构造函数会被调用，在构造函数中会初始化组件的State
step2.React调用组件的render()方法，React去研究哪些内容应该被显示到屏幕上，然后React更新DOM去捕获Clock组件的输出
step3.当Clock组件的输出被插入到DOM中后，react会调用componentDidMount()钩子函数,在这个函数中Clock组件让浏览器每秒钟调用tick()方法
step4.浏览器每隔一秒钟就调用tick()方法，在这个函数中会通过调用setState()去更新state，调用setState()后，React就知道state被改变了，
然后调用render再次去研究哪些内容应该被显示到屏幕上
step5.当Clock组件从DOM中移除，React调用componentWillMount()钩子函数移除定时器
不要直接去修改state，只有在构造函数中才能直接给this.state赋值,在其他地方通过给state直接赋值的方式修改state，并不会引起组件的重新渲染
只能通过this.setState()方法修改state
三.state
state的更新可能时异步的
为了提高性能，React会将多次对setState()的调用合并成一个state的更新。因为this.props和this.state是异步更新的，所以不要依靠它们的值
去计算下一个state。
// wrong
this.setState({
conter:this.state.conter + this.props.num
})
setState()除了可以接受一个对象作为参数，还能接受一个函数作为参数。当setState的参数是一个函数时（可以是一个箭头函数），这个函数的第一个
是之前的state，第二个参数为此时的props
this.setState((prevState,props) => {
return {conter:prevState.conter + props.num}
})
组件能够将他的state作为子组件的props传递给子组件。如
<FormattedDate date={this.state.date}/>
FormattedDate组件在他的props上接受date，并且FormattedDate并不知道date来自于Clock的state，props还是手动添加的类型。
四.数据流
React采用的是从上到下的数据流。任何state都是特定组件私有的，从state派生出的数据和UI只能影响当前组件下面的组件
五.组件之间是相互独立的
funtion App(props){
return (
<div>
<Clock/>
<Clock/>
</div>
)
}
ReactDOM.render(<App/>,document.getElementById('root'));
每一个Clock组件都会设置它自己的定时器并且会相互独立的更新