生命周期图解
参考该例
目前, 我们只学习了一种方法来更新 UI
我们调用 ReactDOM.render() 来改变输出
在本节中, 我学习如何使 Clock 组件真正可重用和封装
它将设置自己的计时器, 并每秒更新一次
从封装时钟开始
然而, 它错过了一个关键的要求
Clock 设置一个定时器并且每秒更新 UI 应该是 Clock 的实现细节
理想情况下, 我们写一次 Clock 然后它能更新自身
为实现这个需求, 我们需要为 Clock 组件添加状态
状态与属性十分相似, 但状态是私有的, 完全受控于当前组件
我们之前提到过, 定义为类的组件有一些特性
局部状态就是如此: 一个功能只适用于类
将函数转换为类
将函数组件 Clock 转换为类
创建一个名称扩展为 React.Component 的 ES6 类
创建一个 render() 空方法
将函数体移动到 render() 中
在 render() 中, 使用 this.props 替换 props
删除剩余的空函数声明
Clock 现在被定义为一个类而不只是一个函数
使用类就允许我们使用其它特性, 例如局部状态, 生命周期钩子
为一个类添加局部状态
三步将 date 从属性移动到状态中
在 render() 方法中使用 this.state.date 替代 this.props.date
来源: http://www.jianshu.com/p/e7ffde157eff