React学习手册

组件扩展

｜

145

</div>

)

}

}

render(

<Clock onClose={() =>

unmountComponentAtNode(target)

}/>,

target

)

在第

3

章中，我们创建了一个

serializeTime

函数，它从数据对象使用首位补零的方式

封装了获取本地时间的方法，返回的当前时间位于一个对象中，包含时、分、秒，以

及表示上午（

AM

）或者下午（

PM

）的标记。起初，我们调用

serializeTime

方法获

取时钟的初始

State

。

当挂载该组件后，我们启动了一个名为

ticking

的时间间隔函数。它每隔一秒触发一

次，使用获得的新时间设置

State

。时钟

UI

会修改它的数值，每隔一秒更新一次时间。

当“

close

”按钮被单击后，

Clock

组件将会被卸载。在时钟从

DOM

中移除之前，

ticking

间隔函数将被清除，防止它在后台继续运行。

更新生命周期

更新生命周期是当组件

State

发生变化或者从父组件接收到新的属性时触发的一系列方

法。该生命周期可以用来在更新组件之前或者之后与

DOM

交互时集成

JavaScript

。此

外，它还可以用于改进应用程序的性能，因为它为用户提供了取消不必要更新操作的

能力。

更新生命周期会在每次调用

setState

方法后启动。调用

setState

方法过程内部

的更新生命周期将会引发无限递归循环，从而导致堆栈溢出错误。因此，只能在

componentWillReceiveProps

方法内部调用

setState

方法，它允许组件属性被更新后 ...