vue生命周期-小程序生命周期-react生命周期及场景？

目录

Vue2.0 组件生命周期

vue3.0组件生命周期

小程序应用生命周期

小程序页面生命周期

小程序组件生命周期

小程序组件所在页面生命周期

react 生命周期函数

---

Vue2.0 组件生命周期

• beforeCreate：创建前，此时data和methods中的数据都还没有初始化；

• created在：实例创建完成后被立即调用，data中的数据和方法，未挂载可以访问；

• beforeMount：挂载开始之前：可以发起服务端请求，请求数据；

• mounted： 挂载到实例上去之后调用，此时可以操作DOM；(注意：并不能确定子组件被全部挂载，如果需要子组件完全挂载之后执行操作可以使用$nextTick)

• beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前；

• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁；

• beforeDestroy：实例销毁之前调用；

• destroyed：Vue 实例销毁后调用。Vue 实例解绑，事件监听移除，子实例被销毁；

vue3.0组件生命周期

• setup 创建实例前；

• onBeforeMount 挂载DOM前；

• onMounted 挂载DOM后；

• onBeforeUpdate 更新组件前；

• onUpdated 更新组件后；

• onBeforeUnmount 卸载销毁前；

• onUnmounted 卸载销毁后；

小程序应用生命周期

• onLaunch：监听小程序启动，渲染完成 (全局只触发一次)；

• onShow：监听小程序启动 或 从后台进入前台 (可以触发多次)；

• onHide：监听小程序隐藏 或 从后台进入前台时 (可以触发多次)；

• onError：监听出现异常；

执行顺序: onLaunch--> onShow --> onHide

小程序页面生命周期

Pages生命周期主要是指各个文件对应的js中的生命周

• onload()：监听页面加载。可以获取当前页面路径中的参数；（一个页面只会调一次）

• onShow()：监听页面显示 / 切入前台；（执行多次）

• onReady()：监听页面初次渲染完成。页面可以和视图层进行交互；（一个页面只会调一次）

• onHide()：监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面；

• onUnload() 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时；

注意点：当切换页面需要多次渲染数据改变状态，建议在onShow中使用，当只需初始化一次的时候，可在onLoad或者onReady中使用。当需要清除定时器时，可在onUnload中使用

执行顺序：onLoad --> onShow --> onReady --> onHide

小程序组件生命周期

• created： 监听组件实例被创建；(用于给组件的 this 添加自定义的属性)

• attached：监听组件实例初始化完毕 / 进入页面节点树；(发请求获取初始数据)

• ready：监听组件在视图层布局完成；(可操作页面)

• moved：监听组件实例被移动到节点树另个位置；

• detached：监听组件实例从页面节点树被移除；(清除定时器)

• error：监听组件方法抛出错误；

小程序组件所在页面生命周期

• show：组件所在页面被展示
• hide：组件所在页面被隐藏
• resize：组件所在页面尺寸改变时

react 生命周期函数

• getDrivedStateFromprops：state的值在任何时候都取决于props时；
• render：必须调用的方法，负责页面的渲染，页面初始加载就会先调用render一次；
• constructor：构造函数，如果没有数据初始化就不用单独调用；
• componentDidMount：组件挂载完毕（插入到DOM）后，会被立即调用；
• componentDidUpdate：更新完成后被立即调用；
• componentWillUnmount：会在组件销毁之前被调用，(组件清理工作，清除计时器、网络请求)；
• getSnapshotBeforeUpdate；
• shouldComponentUpdate：常用于性能优化，防止render进行多次渲染，消耗性能；