生命周期图解
到目前为止我们只学习了一种方法来更新UI。我们调用 ReactDOM.render() 方法来改变输出：
使Clock组件真正柯林斯重用封装状语从句：。它将设置自己的计时器，并每秒钟更新一次。
封装时钟：
Clock设置一个定时器并且每秒更新UI应该是Clock的实现细节。
理想情况下，我们写一次 Clock 然后它能更新自身：
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
为了实现这个需求，我们需要为Clock组件添加”状态(state)”
状态与属性十分相似，但是状态是私有的，完全受控于当前组件。
将函数转换为类
通过5个步骤将函数组件 Clock 转换为类
1、创建一个名称扩展为 React.Component 的ES6 类
2、创建一个叫做render()的空方法
3、将函数体移动到 render() 方法中
4、在 render() 方法中，使用 this.props 替换 props
5、删除剩余的空函数声明
Clock 现在被定义为一个类而不只是一个函数
使用类就允许我们使用其它特性，例如局部状态、生命周期钩子
为一个类添加局部状态
通过3个步骤将 date 从属性移动到状态中：
1、在 render() 方法中使用 this.state.date 替代 this.props.date
2、添加一个类构造函数来初始化状态 this.state
注意我们如何传递 props 到基础构造函数的：
