组件的生命周期，就是一个组件从出生到结束这期间的不同的阶段，比如把组件显示出来，这个阶段叫 componentDidMount ，component 是组件，Did 表示已经，Mount 可以看成是显示，或者翻译成挂载。

使用路由地址可以切换显示不同的组件，这也就会触发组件的生命周期里的这些不同的阶段。下面我们可以去看一下。打开 main.js ，找到 App 这个组件。跟这个组件对应的路由地址是 / ，访问这个地址的时候，会执行组件里的 componentDidMount ，直接在 App 这个类里添加一个这样的方法 ..

做的事可以是简单的在控制台上输出 App did mount ，这个组件里有一个默认的索引，就是这个 Home，所以这个组件也会执行 componentDidMount ，在这个组件里也添加一个这样的方法 .. 然后输出 .. Home did mount

保存 .. 回到首页 .. 在控制台上会显示 home mount ，Home 组件已经显示了，还有一个 app mount ，App 组件也显示了。

在首页转向其它的地址的时候，又会在组件上触发一些动作。 回到编辑器 .. 离开首页去到别处以后，在 App 上会发生 componentWillReceiveProps ，组件将要收到属性 … 在控制台上输出点文字 .. App will receive props .. 又会执行 componentDidUpdate ，组件完成更新 … 添加一个这样的方法，然后在控制台上输出点东西 ..

在 Home 组件上，要发生的是 componentWillUnmount .. 组件要被拿掉到了 … 添加这个方法，再输出点文字 .. Home will unmount ..

假设我们离开首页，打开 tv 这个地址 … 跟这个路由地址对应的是 TV 这个组件，这样在这个组件的上面，会执行一下 componentDidMount ，组件已显示 … 输出的文字就是 tv did mount ..

保存 .. 再回到浏览器上试一下 … 现在打开的是应用的首页，控制台上会显示 home mount ，app mount ，再打开 电视 这个地址 ...

控制台上又会显示 app will receive props ，app 组件要接收到属性，home will unmount ，home 组件被拿掉了， 然后是这个 tv did mount ，tv 这个组件已经显示出来了。 最后是 app did update，app 组件完成了更新 ..