react、vue、uniapp、flutter的生命周期_vue框架,react框架 uniapp

一、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 操作、对组件中的子组件进行操作等操作。常用于获取异步数据和使用第三方库初始化等操作。

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 中清理资源。