1 生命周期图
- 流程图
- 结构图
组件初始化：
- 先调用getDefaultProps()
- getInitialState()
- render
- 第一次 render 后，调用 componentWillMount、componentDidMount
- 之后：componentWillUpdate、componentDidUpdate
这些流程就是为了形成钩子方法。
更新UI可直接调用 ReactDOM.render() 改变输出
那么如何使Clock组件真正 可重用和封装？它将设置自己的计时器，并每秒更新一次。
- 从封装时钟开始
- 然而，它错过了一个关键的要求
Clock设置一个定时器并且每秒更新UI应该是Clock的实现细节
理想情况下，我们写一次 Clock 然后它能更新自身
- 为实现这个需求，我们需要为
Clock组件添加状态
状态与属性十分相似，但状态是私有的，完全受控于当前组件
局部状态就是：一个功能只适用于类
2 将函数转换为类
将函数组件 Clock 转换为类
- 创建一个名称扩展为
React.Component的ES6 类 - 创建一个
render()空方法 - 将函数体移动到
render()中 - 在
render()中，使用this.props替换props - 删除剩余的空函数声明
Clock 现在被定义为一个类而不只是一个函数
使用类就允许我们使用其它特性，例如局部状态、生命周期钩子
