vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数,简介及图示
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 | 监听用户点击右上角收藏 |