生命周期 Vue&&React

本文主要探讨了React和Vue的生命周期,包括创建阶段、生长阶段和卸载阶段的关键方法,如React的constructor、componentDidMount和Vue的beforeMount、mounted等,强调了生命周期在组件管理中的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天说一下生命周期 vue和react

生命周期是很重要的 也是我们因该具备的

React生命周期

一:创建阶段

constructor//这里是初始化函数,设置组件的初始化状态,state执行一次,
componentWillMount//组件将要被创建执行一次
render//组件将要被执行多次
componentDidMount//组件创建成功//执行一次
componentWillReceiveProps(新的props)//这个是当props更新时触发

二:生长阶段

shouldComponentUpdate//在这里可以控制组件是否被更新,它接收两个参数,一个最新的props一个最新的state,而且必须有返回布尔类型的值,返回true则更新组件返回false则不更新
componentWillUpdate//组件将要被更新,它和那个shouldComponentUpdate一样也是接收两个参数
render//为什么在这里又再次提了一遍render呢,因为我们上面所有render会被执行多次,就是每次执行完 componentWillUpdate以后就会去执行一遍render
componentDidUpdate//组件更新完成,接受两个参数,一个是上一次的props一个是上一次的state

三:卸载阶段

componentWillUnmount//卸载组件

接下来说下vue的生命周期

Vue的生命周期

beforeCreated(创建前):实例组件刚创建
create(创建):数据data已经初始化完成,但是DOM未渲染,我感觉这里更适合请求数据,因为用户不想看到空页面
beforeMount:Dom未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示 {{ }}, 这里是因为Vue采用了Virtual DOM(虚拟DOM)技术。
mounted:数据和模板已经结合,在这个生命周期函数中,我们可以通过this.$refs值访问到真实的dom结构
beforeUpdate:只要页面数据触更新都会去触发,数据更新之前所做的一些操作
updated:只要页面数据更新都会去触发,更新后
befoDestory (销毁前)
1.在这个生命周期中,还是可以继续访问到真实的dom结构以及data中的数据
2.一般我们都会在这个生命周期函数中,去做一些事件解绑/移除的操作
destroyed(销毁后)
1.将dom与数据之间的关联进行断开
2.在当前生命周期函数中是访问不到真实的dom结构的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值