参考该例

目前,我们只学习了一种方法来更新UI

我们调用 ReactDOM.render() 来改变输出

• 在本节中，我学习如何使Clock组件真正可重用和封装
  它将设置自己的计时器，并每秒更新一次

• 从封装时钟开始

  
  
  

• 然而，它错过了一个关键的要求
  Clock设置一个定时器并且每秒更新UI应该是Clock的实现细节

理想情况下，我们写一次 Clock 然后它能更新自身

• 为实现这个需求，我们需要为Clock组件添加状态
  状态与属性十分相似，但状态是私有的，完全受控于当前组件

• 我们之前提到过，定义为类的组件有一些特性
  局部状态就是如此：一个功能只适用于类

将函数转换为类

将函数组件 Clock 转换为类

1. 创建一个名称扩展为 React.Component 的ES6 类

2. 创建一个render()空方法

3. 将函数体移动到 render() 中

4. 在 render() 中，使用 this.props 替换 props

5. 删除剩余的空函数声明

   
   
   

Clock 现在被定义为一个类而不只是一个函数

使用类就允许我们使用其它特性，例如局部状态、生命周期钩子

为一个类添加局部状态

三步将 date 从属性移动到状态中

• 在render()中使用this.state.date 替代 this.props.date
  
  
• 添加一个类构造函数来初始化状态 this.state
  
  
  
  注意如何传递 props 到基础构造函数的
  
  
  
  类组件应始终使用props调用基础构造函数

• 从 <Clock /> 元素移除 date 属性

  
  
  
  
  

  稍后将定时器代码添加回组件本身。

• 结果如下

  
  
  

接下来，我们将使Clock设置自己的计时器并每秒更新一次

将生命周期方法添加到类中

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要

每当Clock组件第一次加载到DOM时，我们都想生成定时器，这在React中被称为挂载

同样，每当Clock生成的这个DOM被移除时，我们也会想要清除定时器，这在React中被称为卸载

我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：