vue、react生命周期函数
一、Vue之生命周期函数
1.创建前/后:
beforeCreate:在实例初始化之后
created:在实例创建完成后被立即调用
2.载入前/后:
beforeMount:在载入之前被调用
mounted:在载入后调用
3.更新前/后:
beforeUpdate:数据更新前调用
update:数据更新时调用
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的时候,不会影响父组件
- 点赞
- 收藏
- 分享
- 文章举报
- vue的生命周期及钩子函数
- React 生命周期函数执行顺序
- 【Vue记录】生命周期钩子函数与箭头函数
- vue中的生命周期函数都在什么时候执行?
- React3 生命周期函数
- vue生命周期函数
- JSX组件计数器看React生命周期函数
- Vue中的生命周期概念及钩子函数
- Vue 学习笔记 4.0 --- 生命周期函数
- vue的生命周期钩子函数
- Vue实例的生命周期和钩子函数
- Vue学习笔记3.2-生命周期函数 beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destro
- React组件生命周期-正确执行初始化阶段的函数
- vue生命周期函数以及组件之间的传值
- VUE生命周期各个函数
- React生命周期函数
- vue生命周期函数
- 图解React生命周期函数
- vue生命周期钩子函数
- react---- 生命周期函数