生命周期图解
参考该例
目前,我们只学习了一种方法来更新UI
我们调用 ReactDOM.render()
来改变输出
Clock
组件真正可重用和封装
它将设置自己的计时器,并每秒更新一次理想情况下,我们写一次 Clock 然后它能更新自身
Clock
组件添加状态
状态与属性十分相似,但状态是私有的,完全受控于当前组件
将函数组件 Clock
转换为类
React.Component
的ES6 类render()
空方法render()
中render()
中,使用 this.props
替换 props
Clock 现在被定义为一个类而不只是一个函数
使用类就允许我们使用其它特性,例如局部状态、生命周期钩子
三步将 date 从属性移动到状态中
render()
中使用this.state.date
替代 this.props.date
this.state
注意如何传递 props
到基础构造函数的
类组件应始终使用props
调用基础构造函数
稍后将定时器代码添加回组件本身。
接下来,我们将使Clock设置自己的计时器并每秒更新一次
在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要
每当Clock
组件第一次加载到DOM时,我们都想生成定时器,这在React中被称为挂载
同样,每当Clock
生成的这个DOM被移除时,我们也会想要清除定时器,这在React中被称为卸载
我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码: