vue、react生命周期函数

一、Vue之生命周期函数

1.创建前/后：
beforeCreate:在实例初始化之后
created：在实例创建完成后被立即调用
2.载入前/后：
beforeMount：在载入之前被调用
mounted：在载入后调用
3.更新前/后:
beforeUpdate：数据更新前调用
updated：数据更新时调用
4.销毁前/后:
beforeDestroy：实例销毁之前调用
destroyed： 实例销毁后调用

============================
1.在生命周期钩子函数中父子组件执行顺序：
beforeMount–执行顺序是先父后子
mounted–执行顺序是先子后父
beforeDestroy–执行顺序是先父后子
destroyed—执行顺序是先子后父

2.第一次页面加载会触发那几个钩子？
beforeCreate created beforeMount mounted

二、React之生命周期函数

1.组件载入阶段：
componentWillMount:组件即将被装载、渲染到页面上，只调用1次
componentDidMount:组件真正在被装载之后，这里可以拿到真实DOM执行操作，只调用1次
2.运行中状态：
componentWillReceiveProps(nextProps):组件将要接收到新属性的时候调用，在这时setState不会触发额外的render,因为此时已经有一次来自父组件引发的render了。
shouldComponentUpdate:当数据有更新的时候，props或者state就执行 在 WillUpdate之前,使用判断允不允许组件调用render函数来更新视图
componentWillUpdate:当有数据改变的时候，props或者state改变时,还没有重新调用render函数之前
componentDidUpdate:视图更新成功
3.销毁阶段：
componentWillUnmount:当组件被移出了的时候

React生命周期函数的执行顺序

1.组件初始化：constructor–>componentWillMount–>render–>componentDidMount
2.当props更新的时候：componentWillReceiveProps–>shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate
3.当state更新的时候：shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate

注：如果父也绑了生命周期钩子函数，子组件也有，当更新父组件的state的时候，全部生命周期钩子函数执行顺序：

如果只改变子组件的state的时候，不会影响父组件