深入浅出React+Redux（二：React 组件的生命周期）

前言

如同人有生老病死 ， 自然界有日月更替，每个组件在网页中也会被创建、更新和删除，如同有生命的机体一样 。

React 严格定义了组件的生命周期，生命周期可能会经历如下三个过程：

• 装载过程（ Mount），也就是把组件第一次在 DOM 树中渲染的过程；
• 更新过程（ Update ），当组件被重新渲染的过程；
• 卸载过程（ Unmount），组件从 DOM 中删除的过程 。

三种不同的过程， React 库会依次调用组件的一些成员函数，这些函数称为生命周期函数。

（一）装载过程

当组件第一次被渲染的时候，依次调用的函数

1. constructor： 构造函数，要创造一个组件类的实例。

   • 用于继承父类的props
   • 初始化state
   • 绑定成员函数的this

2. getlnitialState： 函数的返回值会用来初始化组件的 this.state ，在一个组件声明周期只调用一次,不建议放置多次调用代码。但是，这个方法只有用 React.createClass 方法创造的组件类才会发生作用（PS：现在已经被遗弃，ES声明在构造函数中）。

3. getDefaultProps：函数的返回值可以作为 props 的初始值。但是，这个函数只在 React.createClass 方法创造的组件类才会用到 （PS：现在已经被遗弃，ES声明使用组件的 defaultProps属性）。

4. componentWillMount：将要装载时。即使调用 this.setState修改状态也不会引发重新绘制。换句话说，所有可以在这个 componentWillMount 中做的事情，都可以提前到 constructor 中间去做，可以认为这个函数存在的主要目的就是为了和 componentDidMount 对称 。

5. render： 返回渲染内容。没有也必须返回null或者false，告诉React不需要渲染DOM元素。

6. componentDidMount：组件加载完成。render 函数被调用完之后，并非立即调用，是render函数返回的内容已经渲染到DOM树上。此时才触发此函数。

我们还是以 ControlPanel 为例，在 ControlPanel 中有三个 Counter 组件，我们稍微
修改 Counter 的代码，让装载过程中所有生命周期函数都用 console.log 输出函数名和caption 的值。

    constructor(props){
         ....
+        console.log(`enter constructor, ${
   this.props.caption}`);
     }

+    componentWillMount() {
+        console.log(`enter componentWillMount,${
   this.props.caption}`);
+    }


+    componentDidMount() {
+        console.log(`enter componentDidMount,${
   th