React State & 生命周期

生命周期图解

到目前为止我们只学习了一种方法来更新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 到基础构造函数的：

待续......