看到生命周期life cycle，我就感觉到了生生不息的循环cycle啊！我是要交代在这个圈圈里了吗？react中的生命周期是干嘛的呢？如果只是单纯的渲染就没有生命周期一说了吧，毕竟只要把内容渲染出来，任务就完成了。所以这里的生命周期一定和变化有关，有变化才需要重新渲染，然后再变化，再渲染，这才是一个圈嘛，这才是life cycle。那么React中的元素变化是怎么变的呢？
先来一个官方的生命周期（我看着就头晕）：
点我看live版本
官方的全周期：
官方的简约版周期：
有没有看着头疼，反正我是跪了，真令人头大的生命周期啊。我还是通过实战来确认这个更新是怎么产生的吧。实战出真理！（一些不安全的方法，或者一些我们不太用得到的，这里就不讨论了。）
Mounting装备阶段：
constructor()
render()
componentDidMount()
Updating更新阶段：
render()
componentDidUpdate()
具有争议的componentWillReceiveProps()
Unmounting卸载阶段：
componentWillUnmount()
Error Handling错误捕获极端
componentDidCatch()
这里我们通过运行代码来确认生命周期，这里是一个父元素嵌套子元素的部分代码，就是告诉大家，我在每个阶段打印了啥。这部分的例子我用的还是上方的App和App1的例子。
//father constructor(props){ console.log("father-constructor"); } componentDidMount() { console.log("father-componentDidMount"); } componentWillUnmount() { console.log("father-componentWillUnmount"); } componentDidUpdate() { console.log("father-componentDidUpdate"); } render() { console.log("father-render"); } //child constructor(props){ console.log("child-constructor"); super(props) } componentDidMount() { console.log("child-componentDidMount"); } componentWillUnmount() { console.log("child-componentWillUnmount"); } componentDidUpdate() { console.log("child-componentDidUpdate"); } componentWillReceiveProps(){ console.log("child-componentWillReceiveProps"); } render() { console.log("child-render"); }好了~开始看图推理~
初始化运行状态：
父元素先运行创建这没有什么问题，但是问题是父元素还没有运行结束，杀出了一个子元素。也就是说父元素在render的时候里面碰到了子元素，就先装载子元素，等子元素装载完成后，再告诉父元素我装载完毕，父元素再继续装载直至结束。
我点击了一下，父元素setState，然后更新了子元素的props。
同样的先父元素render，遇到子元素就先暂时挂起。子元素这个时候出现了componentWillReceiveProps，也就是说他是先知道了父元素传props过来了，然后再render。因为有时候我们需要在获取到父元素改变的props之后再执行某种操作，所以componentWillReceiveProps很有用，不然子元素就直接render了。突想皮一下，那么我子元素里面没有props那是不是就不会执行componentWillReceiveProps了？？就是<App1 num={this.state.num}/>变成<App1/>。我还是太天真了。这个componentWillReceiveProps依然会执行也就是说：
componentWillReceiveProps并不是父元素传入的props发生了改变，而是父元素render了，就会出发子元素的这个方法。
关于卸载，我们来玩一下，把App的方法改成如下方所示，当num等于2的时候，不显示App1。
render() { return( <div> {this.state.num===2?"":<App1 num={this.state.num}/>} <button onClick={this.addNum}>点我+1</button> </div> ) }App先render，然后卸载了App1之后，完成了更新componentDidUpdate。
那么大家看懂了生命周期了吗？？我总结了下：
父元素装载时render了子元素，就先装载子元素，再继续装载父元素。
父元素render的时候，子元素就会触发componentWillReceiveProps，并且跟着render
父元素卸载子元素时，先render，然后卸载了子元素，最后componentDidUpdate
如何子传父亲呢？？