小程序生命周期以及路由跳转总结

小程序生命周期与路由跳转

一、小程序生命周期

说到小程序生命周期，首先来回顾一下vue与react的生命周期

vue官网周期图

函数名	说明	个人理解与注意事项
beforeCreate	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。	此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
created	在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。	这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。	编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
mounted	实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。该钩子在服务器端渲染期间不被调用。	模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。	这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。该钩子在服务器端渲染期间不被调用。	大多数情况下，应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。	这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
destroyed	实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。	用户离开当前页面执行

react常用生命周期

函数名	说明	个人理解与注意事项
render	render() 方法是 class 组件中唯一必须实现的方法。当 render 被调用时，它会检查 this.props 和 this.state 的变化	render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
constructor	如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。	在 constructor() 函数中不要调用 setState() 方法。避免将 props 的值复制给 state！
componentDidMount	会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。	你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。
componentDidUpdate	componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。	当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，否则可能会会导致死循环。
componentWillUnmount	componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。	componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。
shouldComponentUpdate	shouldComponentUpdate(nextProps, nextState)的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。	当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
componentDidCatch	componentDidCatch(error, info)此生命周期在后代组件抛出错误后被调用。	error抛出的错误。info 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

1、uniapp

(1)应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

(2)页面生命周期

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0

(3)组件生命周期

详细查看上方vue生命周期

2、taro

(1)应用生命周期

// app.jsx
// onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch
componentWillMount() {}
// onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch，在 componentWillMount 后执行
componentDidMount () {}
// onShow
componentDidShow () {}
// onHide
componentDidHide () {}
// onError
componentDidCatchError () {}
// onPageNotFound 404
componentDidNotFound () {}

(2)页面生命周期

函数名	说明
componentWillMount()	页面加载时触发，一个页面只会调用一次，此时页面 DOM 尚未准备好，还不能和视图层进行交互 ----- react一致 — 一般不使用（以前的react版本支持在此处请求数据，但是现在不建议）
componentDidMount()	页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互 - react一致 — 请求数据、DOM操作
shouldComponentUpdate(nextProps, nextState)	页面是否需要更新，返回 false 不继续更新，否则继续走更新流程 — react 一致 — 提升react组件性能的关键
componentWillUpdate(nextProps, nextState)	页面即将更新 — react一致 — 一般不使用
componentDidUpdate(prevProps, prevState)	页面更新完毕 ---- react一致 — 可以请求数据但是不建议，如果非要请求，必须得加判断。 能在此请求数据（如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求）
componentWillUnmount()	页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时 — 小程序这块 缓存我们的页面
componentDidShow()	页面显示/切入前台时触发 ---- onShow()
componentDidHide()	页面隐藏/切入后台时触发， 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等 — onHide()

在以上所有的生命周期方法中，都可以通过 this.$router.params 获取打开当前页面路径中的参数。
其他的函数

onPullDownRefresh()

onReachBottom()

onPageScroll(Object)

onShareAppMessage(Object)

(3)组件生命周期

参考react生命周期

二、路由跳转

方法	说明
uni.navigateTo(OBJECT)	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)	关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch(OBJECT)	关闭所有页面，打开到应用内的某个页面。
uni.switchTab(OBJECT)	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack(OBJECT)	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

以上taro同样适用（只需将uni改为Taro）并可以使用.then

import Taro from '@tarojs/taro'

Taro..navigateTo(OBJECT).then(...)

官方例子