vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数，简介及图示
2024-06-03 12:40:59
vue生命周期函数
- beforeCreate (创建前)
- created （创建后）
- beforeMount (挂载前)
- mounted (挂载后)
- beforeUpdate (数据更新前)
- updated (数据更新后)
- beforeDestroy (销毁前)
- destroyed (销毁后)
详情传送门
react生命周期函数
初始化
1.getDefaultProps()
- getDefaultProps这种定义方式是用在你定义组件用的是React.createClass方式的
如果使用的是es6的语法，例如用的是class 组件名 extends React.Component的话，就不要用
getDefaultProps这种方式去定义props了，而是应该用 static propTypes ＝｛｝来定义，这样就不会有警了
getInitialState()
- 与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义 this.state。此时可以访问this.props
componentWillMount()
- 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
render()
- react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
componentDidMount()
- 组件渲染之后调用，只调用一次。可以在此请求数据
更新
componentWillReceiveProps(nextProps)
- 组件初始化时不调用，组件接受新的props时调用。
shouldComponentUpdate(nextProps, nextState)
- react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候
componentWillUpdata(nextProps, nextState)
- 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
render()
- 组件渲染
componentDidUpdate()
- 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
卸载
componentWillUnmount()
- 组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
详情传送门
微信小程序生命周期函数
页面生命周期
详情传送门
- onLoad (监听页面加载)
- onReady (监听页面初次渲染完成)
- onShow (监听页面显示)
- onhide (监听页面隐藏)
- onUnload (监听页面卸载)
- onPullDownRefresh (监听用户下拉动作)
- onReachBottom (页面上拉触底事件的处理函数)
- onShareAppMessage (用户点击右上角分享)
- onPageScroll (页面滚动触发事件的处理函数)
- onResize (页面尺寸改变时触发，详见 响应显示区域变化)
- onTabItemTap (当前是 tab 页时，点击 tab 时触发)
应用生命周期函数
应用生命周期函数传送门
- onLaunch (监听小程序初始化)
- onShow (监听小程序显示)
- onHide (监听小程序隐藏)
- onError (错误监听函数)
- onPageNotFound (页面不存在监听函数)
- onUnhandledRejection ()
组件生命周期函数
组件生命周期函数传送门
- created (在组件实例刚刚被创建时执行)
- attached (在组件实例进入页面节点树时执行)
- ready (在组件在视图层布局完成后执行)
- moved (在组件实例被移动到节点树另一个位置时执行)
- detached (在组件实例被从页面节点树移除时执行)
- error (每当组件方法抛出错误时执行)
组件所在页面的生命周期
- show (组件所在的页面被展示时执行)
- hide (组件所在的页面被隐藏时执行)
- resize (组件所在的页面尺寸变化时执行)
uni-app 生命周期函数
应用生命周期
- onLaunch (当uni-app 初始化完成时触发（全局只触发一次）)
- onShow (当 uni-app 启动，或从后台进入前台显示)
- onHide (当 uni-app 从前台进入后台)
- onError (报错是触发)
- onUniNViewMessage (对 nvue 页面发送的数据进行监听)
- onUnhandledRejection (对未处理的 Promise 拒绝事件监听函数（2.8.1+）)
- onPageNotFound (页面不存在监听函数)
- onThemeChange (监听系统主题变化)
页面生命周期
| 函数名 | 说明 |
|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参） |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新 |
| onReachBottom | 页面上拉触底事件的处理函数 |
| onTabItemTap | 点击 tab 时触发，参数为Object |
| onShareAppMessage | 用户点击右上角分享 |
| onPageScroll | 监听页面滚动，参数为Object |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object |
| onBackPress | 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 |
| onShareTimeline | 监听用户点击右上角转发到朋友圈 |
| onAddToFavorites | 监听用户点击右上角收藏 |
详情传送门
vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数，简介及图示相关推荐
- 微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数 文章目录 微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
- java计算机毕业设计基于安卓Android/微信小程序的游泳馆管理系统APP
项目介绍 游泳馆管理系统小程序,主要对首页.个人中心.会员管理.场馆类型管理.泳池类型管理.饮食类型管理.场馆信息管理.泳池信息管理.饮食信息管理.泳池预订管理.购买信息管理.会员等级管理.会员充值管 ...
- PHP开发B2C商城 微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍 一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
- java计算机毕业设计基于安卓Android/微信小程序的自来水收费系统APP
项目介绍 网络的广泛应用给生活带来了十分的便利.所以把自来水收费管理与现在网络相结合,利用java技术建设自来水收费系统app,实现自来水收费的信息化.则对于进一步提高自来水收费管理发展,丰富自来水收 ...
- 微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件 先展示一下我实现了的功能吧 提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
- 不改一行代码，将微信小程序转成商业App？
Web2.0前期的"眼球经济",即以吸引用户长时间观看内容.使用工具为导向,占有用户的"屏幕时间"(Screen time),从中寻求各种"变现&qu ...
- 微信小程序：未找到 app.json 中的定义的 pages “pages/index/index“ 对应的 WXML 文件
微信小程序:未找到 app.json 中的定义的 pages "pages/index/index" 对应的 WXML 文件 前情:本人在自学微信小程序时,遇到了调用模板出现错误的 ...
- 在微信小程序中如何下载APP？
关注小编微信公众号公众号[前端基础教程从0开始]回复"1",拉你进程序员技术讨论群,群内有大神,可以免费提供问题解答.公众号回复"小程序",领取300个优秀的小 ...
- 微信小程序会替代原生APP吗？
今天是微信小程序正式发布的日子,我也来蹭一下热点,凭自己的理解分析一下微信小程序的影响. 不废话,先回答标题,微信小程序会替代原生APP吗?我的回答是会替代活跃度低的APP. 有不少人谈论微信小程序会 ...
- 微信小程序模仿开眼视频app（二）——搜索功能
微信小程序模仿开眼视频app(一)有介绍首页.视频详情和分类部分 可到我的github账号上去copy文件 搜索部分 一开始没想要设置历史记录啊.热门搜索啊这些的,只是想把搜索框弄好看一点,无意中发现 ...
最新文章
- Node.js + Express + Springboot实现前后端分离架构
- java把一段英文拆成单词_Java Word Break(单词拆解)
- 微服务已过时！DDD领域建模与架构设计才是未来！
- 0x0F19B7EC (ucrtbased.dll)处(位于 ex6.exe 中)引发的异常: 0xC0000005: 写入位置 0x00740000 时发生访问冲突。...
- vux 组件打造手机端项目
- python编码类型互转总结
- Bell数的生成函数推导
- Wannafly挑战赛22游记
- 唐山职业技术学院计算机专业分数线,唐山职业技术学院历年分数线 2021唐山职业技术学院录取分数线...
- Oracle11g adump目录下面.aud增长导致空间撑满无法删除导致CRS无法启动的解决方法
- 你真的会用搜索引擎吗
- SQL：pgsql插入数据
- linux mysql5.7.12安装图解_centos 安装 mysql-5.7.23-linux-glibc2.12-x86_64.tar.gz 详细步骤
- 仿节奏大师java_HelloCpp 仿节奏大师Android游戏版本，只实现了击键功能，可以给大家启发. 238万源代码下载- www.pudn.com...
- zing开发者_Zing免费开放Java开发人员
- python 创建netcdf_如何用python netCDF4创建netCDF文件？
- 青少年计算机编程少儿编程小学生编程是否适合
- 弘辽科技：提升销量没流量要继续提升吗？如何提高店铺流量？
- 酷狗导致django8000端口占用
- 李峋同款爱心代码 python版