生命周期 Vue&&React

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

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

React生命周期

一:创建阶段

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

二:生长阶段

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueReact是两个常用的前端框架,它们都有自己的生命周期函数用于管理组件的创建、更新和销毁过程。 Vue生命周期函数包括初始化、创建、挂载、更新和销毁等几个阶段。具体来说,Vue生命周期函数按照顺序包括: 1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前调用。 2. created:在实例创建完成后调用,此时实例已经完成了数据观测 (data observer),属性和方法的运算,watch/event 事件回调。但是还未开始DOM编译。 3. beforeMount:在挂载开始之前被调用,此时尚未生成真实的DOM节点。 4. mounted:在挂载完成后被调用,此时组件已经生成了对应的真实DOM节点,可以对DOM进行操作。 5. beforeUpdate:在数据更新之前被调用,可以在这个钩子里进行更新前的操作。 6. updated:在数据更新完成后被调用,可以在这个钩子里进行更新后的操作。 7. beforeDestroy:在实例销毁之前调用,可以在这个钩子里进行一些清理工作。 8. destroyed:在实例销毁之后调用,此时实例中的所有指令及事件监听器都已经被移除。 React生命周期函数则有一些不同,主要包括: 1. constructor:在组件被创建时调用,用于初始化状态和绑定事件处理方法。 2. render:用于渲染组件的内容,返回一个React元素。 3. componentDidMount:在组件挂载到DOM后调用,可以进行一些需要DOM操作的初始化工作。 4. componentDidUpdate:在组件更新后被调用,可以进行一些需要DOM操作的更新工作。 5. componentWillUnmount:在组件即将从DOM中移除时调用,可以进行一些清理工作。 在新版本的React中,还引入了一些新的生命周期函数,比如getDerivedStateFromProps和getSnapshotBeforeUpdate,用于实现一些额外的功能。 总结一下,VueReact生命周期函数在创建、更新和销毁的过程中有所不同,同时React还引入了一些新的生命周期函数。了解这些生命周期函数的执行顺序和用途可以帮助我们更好地管理和控制组件的行为。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值