React（6）生命周期（组件生命周期、state生命周期）-蒲公英云

React（6）生命周期（组件生命周期、state生命周期）

桃扇骨 2022-05-31 08:08 566阅读 0赞

12、生命周期

参考链接：

React组件生命周期小结

两个生命周期，分别是组件的生命周期，和状态变更的声明周期

组件结构：

父组件套用子组件

初次渲染：

constructor 【父组件】构造函数
componentWillMount 【父组件】挂载前
render 【父组件】渲染
constructor 【子组件】构造函数
componentWillMount 【子组件】挂载前
render 【子组件】渲染
componentDidMount 【子组件】挂载后执行
componentDidMount 【父组件】挂载后执行

总结：

先构造函数，然后执行挂载前函数，然后父组件开始渲染；
渲染的时候，查到子组件，开始递归子组件，执行以上流程；
收尾的时候，先执行子组件的挂载后函数，再执行父组件的该函数；

state 被改变：

shouldComponentUpdate 【父组件】当state被改变后，这个函数会被执行，如果返回true，那么会触发render，否则不会触发render。但注意，事实上的值都会被更新 {} {count: 1}
componentWillUpdate(nextProps, nextState) 【父组件】，render渲染前执行
render 【父组件】
componentWillReceiveProps 【子组件】当父组件的 state 改变后，这个函数会被执行。props的值： {}
shouldComponentUpdate 【子组件】当state被改变后，这个函数会被执行，如果返回true，那么会触发render，否则不会触发render。但注意，事实上的值都会被更新 {} null
componentWillUpdate(nextProps, nextState) 【子组件】，render渲染前执行
render 【子组件】渲染完毕
componentDidUpdate 【子组件】子组件的render已经渲染完毕
componentDidUpdate 【父组件】父组件的render已经渲染完毕

总结：

父组件state被改变后，首先判断需不需要重新渲染，不需要的话就没有更多事情了；
需要渲染的话，先执行父组件渲染前函数，然后执行父组件 render；
进入递归流程，开始检查子组件；
子组件先执行获取 props 的函数（props 从父组件传来）；
然后子组件判断要不要重新渲染子组件，如果不需要，则子组件终止流程，跳回父组件执行父组件的渲染完毕（componentDidUpdate）；需要则继续下一步；
子组件执行渲染前函数（渲染前处理 props 用，同第二步），然后执行子组件 render；
如果子组件还有子组件，则重复 3 ~ 6 ；
子组件渲染完毕后，执行子组件 渲染完毕函数，并冒泡执行父组件 渲染完毕函数；

建议参照 DEMO 查看。

使用说明：

第一次点击按钮，执行完整的 state 改变周期；
第二次点击，父组件改变但不渲染；
第三次点击，父组件渲染，但是子组件不渲染；
第四次点击，同第二次；

即父组件第 2n+1 次点击渲染，2n 次不渲染；子组件是父组件第 2n 次渲染时，不渲染，第 2n+1 次渲染时，渲染；

生命周期钩子函数	执行时间	描述
constructor	创建组件时调用	显然创建组件时，会第一时间调用这个
componentWillMount	组件挂载前	在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。
componentDidMount	组件挂载后	此时子组件挂载好了，可以在这里使用 refs。注意，在此之前子组件会先执行完生命周期钩子（比如子组件的这个函数比父组件的这个函数优先执行）
componentWillReceiveProps(nextProps)	父组件的 state 改变后，子组件的这个函数会被执行	父组件的 state 被改变后，子组件的这个函数会执行（参数是props，包括改变的和未改变的），并且子组件的 render 函数随后会被执行
shouldComponentUpdate(nextProps, nextState)	state 被改变后（包括父组件），这个函数会被执行； return true 会触发render和子组件的这个函数（默认true） return false 值已被修改但不会触发 render；	返回true，会导致先执行父组件的 render（渲染），再执行子组件的 componentWillReceiveProps（子组件props更新），再执行子组件的 shouldComponentUpdate（子组件是否渲染）；如果子组件返回true，则依次类推；返回false，上面后续的全部不会执行
componentWillUpdate(nextProps, nextState)	shouldComponentUpdate 返回 true 后，执行这个（更新前）	上面返回 true 才会执行，否则不会
render	渲染函数	这个是核心，一般返回 JSX 语法的 DOM；建议不要在这里修改state的值
componentDidUpdate(preProps, preState)	渲染完毕后执行	先执行子组件的这个函数，再执行父组件的这个函数。注意，这里的2个参数，是之前的 state 的值，而不是最新的 state 的值，如果要拿最新的，请通过 this.state.xx 来获取
componentWillUnmount	组件卸载时执行	卸载时执行