同步更新ES6教程

————致力于最简单的前端教程，每天一篇文章，轻松进阶前端

生命周期

组件从开始渲染到销毁是一个完整的生命周期，分三个阶段：

1. Mounting

组件挂载（渲染）

2. Updating

组件重新渲染

3. Unmounting

组件卸载（销毁）

每个阶段前后都会调用固定的方法：

1. Mounting

componentWillMount：组件挂载之前调用

componentDidMount：组件挂载之后调用

2. Updating

componentWillReceiveProps：组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate：在组件接收到新的props或者state时被调用，返回false不更新组件。

componentWillUpdate

componentDidUpdate

3. Unmounting

componentWillUnmount

上面加粗的是经常用到的2个方法

例子

上篇讲到的例子，更新时间的定时器应该放在"合适的位置"，从生命周期看，我们期望组件渲染完成之后（componentDidMount）开始执行定时器以更新时间，如下图。

代码

整个组件渲染更新流程：组件渲染完成>执行componentDidMount>定时器开始>修改state.date>更新组件。

到此这个DEMO就完成了，下章我们会在这个DEMO基础上添加新功能>事件处理。

【前方雾大，关注一下不迷路 = 。=】

【web前端开发】【javascript】【web前端开发】【javascript】【web前端开发】【javascript】【web前端开发】【javascript】