React State
- React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
例子：一个时钟案例，涉及到了React生命周期
//这里注册一个React.Componentde ES6类
class Clock extends React.Component {
//类构造函数
constructor(props) {
//标注1
super(props);
//初始化状态机
this.state = {date: new Date()};
}
//基础构造函数
//组件输出到DOM后会执行，开始计时，每一秒调用一次tick给
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
//DOM移除以后执行，清除定时器
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
//调用setState以后，就会执行 render 方法
this.setState({
date: new Date()
});
}
//render 就是把里面的元素diff一次后全部重绘，所以this.state.date会不同，然后触发渲染
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
小结：整体过程我们过一下：
1：ReactDOM.render,将clock组件渲染到页面中的example节点下面，然后创建类 构造函数，然后初始化state，页面展示的初始数据，然后开始render，然后React更新DOM以匹配Clock的渲染输出，然后触发componentDidMount生命周期，然后这里面一秒调用一次tick，触发setState方法，这个触发以后会执行render，然后render把里面的元素diff一次全部重绘，上例子中，因为执行render前，先把state重新赋值，然后再diff时候，发现有差异，并且重绘，
