react、vue、uniapp、flutter的生命周期

一、Vue 中,有以下生命周期:

beforeCreate

在实例被创建之初,数据观测和事件配置之前执行。此时组件的 data、methods、computed 和 watch 上的属性及方法均不能访问和使用。

created

在实例创建完成后,即 Vue 实例完成了数据观测等初始工作后执行。此阶段完成了各种初始化操作,但是并没有开始渲染DOM节点。

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。此阶段完成了模板渲染,将组件挂载至页面的过程。

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed

实例销毁之后调用。该钩子被调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

这些生命周期函数可以帮助开发者在不同的阶段做出相应的操作,比如在 created 钩子中请求数据,或在 mounted 钩子中对DOM进行操作等。

二、React 中,有以下生命周期:

componentWillMount

组件即将装载到页面上时执行,在 render 函数执行之前调用。不推荐在此阶段进行数据请求等操作。

componentDidMount

组件装载完成后执行,此时组件已经被渲染出来,并且可以进行 DOM 操作、对组件中的子组件进行操作等操作。常用于获取异步数据和使用第三方库初始化等操作。

扫描二维码关注公众号,回复: 16528835 查看本文章

shouldComponentUpdate

组件更新前判断是否需要更新,默认返回 true 代表需要更新。开发者可以根据自身需求进行优化,通过避免重复渲染提高性能。

componentWillUpdate

组件即将更新时执行,在 render() 函数执行之前调用。此函数内部不能更新状态,否则会陷入死循环。

componentDidUpdate

组件更新完成后执行,此时组件已经被重新渲染并更新至最新状态。常用于操作更新后的DOM元素,例如手动更新其他组件或管理资源。

componentWillUnmount

组件即将被卸载时执行。可以在该钩子函数中清除定时器、取消网络请求等操作,保证组件在销毁之前没有副作用。

这些生命周期函数在组件的不同阶段被触发,帮助开发者进行相应的操作。其中,componentDidMount 和 componentDidUpdate 是常用的生命周期函数,在这两个阶段进行异步数据请求和 DOM 操作等。

三、Uniapp 中,有以下生命周期:

onLoad

页面加载时执行,只会执行一次。通常用于页面初始化操作。

onShow

页面显示/切入前台时触发,可以执行一些可见性相关的操作,如数据请求、计时器启动等。

onReady

页面初次渲染完成时执行,此时可以获取组件实例、操作 DOM 等。

onHide

页面隐藏/切入后台时触发,在此阶段可以进行清理工作,例如重置数据、销毁计时器等。

onUnload

页面卸载时执行,也仅会执行一次。可以在此阶段进行清理工作,例如取消订阅、解绑事件等。

除了以上五个页面生命周期外,还有一个全局生命周期函数 onLaunch,它是在应用初始化完成时触发,该函数只会执行一次。通常用于应用启动时的初始化操作,例如获取用户信息、登录状态检查等。

这些生命周期函数可以帮助开发者在不同的阶段做出相应的操作,比如在 onLoad 钩子中请求数据并展示页面,或在 onHide 钩子中停止计时器避免占用系统资源等。

四、Flutter 中,有以下生命周期:

StatefulWidget 的生命周期:

  1. createState:当 StatefulWidget 第一次插入到控件树时,Flutter 框架会调用这个方法来创建一个对应的 State 对象。
  2. initState:当 State 对象被创建时,Flutter 框架会调用这个方法。在这个方法中,开发者可以进行一些初始化操作,例如获取网络数据、创建动画等。
  3. didChangeDependencies:当 State 对象依赖的 InheritedWidget 发生变化时,Flutter 框架会调用这个方法。通常在这个方法中更新依赖的数据,例如从 InheritedWidget 中读取最新的数据。
  4. build:每次调用 setState() 方法时,Flutter 框架都会调用这个方法来构建界面。在这个方法中,开发者需要返回一个 Widget 来描述当前的界面状态。
  5. didUpdateWidget:当父级 widget 触发了重建,导致当前 widget 需要更新时,Flutter 框架会调用这个方法。在这个方法中,开发者可以比较新旧两个 widget 的属性差异,从而做出相应的处理。
  6. deactivate:当 State 对象从树中被移除时,Flutter 框架会调用这个方法。在这个方法中,开发者可以释放资源、停止计时器等操作。
  7. dispose:当 State 对象永久从树中移除时,Flutter 框架会调用这个方法。此时 State 对象已经不可见,开发者可以在这个方法中释放所有资源。

StatelessWidget 的生命周期:

build:与 StatefulWidget 相同,在每次重新绘制界面时调用。
这些生命周期函数可以帮助开发者掌握 flutter 控件的生成和销毁过程,并在不同的阶段做出相应的操作,例如在 initState 中进行异步数据请求或在 dispose 中清理资源。

猜你喜欢

转载自blog.csdn.net/weixin_43534452/article/details/131421745