Taro 兼容 h5 踩坑指南---页面切换生命周期componentDidMount未触发(路由跳转和生命周期)

问题描述

使用taro开发h5应用,路由跳转时发现页面的生命周期componentDidMount,componentWillUnmount没有触发

taro版本:3.0.27
框架: react
编译命令: npm run build h5

解决过程

1. 查看Taro官方文档,页面组件生命周期的触发机制,Taro的生命周期不完全和react的一致.
2. 观察路由跳转可以正常触发componentDidMount的页面的写法,找不同
3. 发现是否正常触发生命周期,和路由跳转时使用的方法有关
4. 查看Taro官方文档的路由跳转API介绍
5. 确认只有跳转时关闭当前页面才可以正确触发生命周期

知识剖析

页面组件的生命周期

Taro 3 在小程序逻辑层上实现了一份遵循 Web 标准 BOM 和 DOM API。因此 React 使用的 document.appendChild、document.removeChild 等 API 其实是 Taro 模拟实现的，最终的效果是把 React 的虚拟 DOM 树渲染为 Taro 模拟的 Web 标准 DOM 树。

因此在 Taro3 中，React 的生命周期触发时机和我们平常在 Web 开发中理解的概念有一些偏差。

Taro路由跳转

方法名称	是否关闭当前页面	描述
switchTab	不一定	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	是	关闭所有页面，打开到应用内的某个页面
redirectTo	是	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
navigateTo	否	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
navigateBack	是	关闭当前页面，返回上一页面或多级页面

解决方案

如果需要稳定触发react生命周期,使用会关闭当前页面的跳转方法

参考资料

Taro-页面组件生命周期的触发机制
Taro(API)-路由跳转