Taro的生命周期

·  阅读 1952

简介

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用;

结构

├── babel.config.js             # Babel 配置
├── .eslintrc.js                # ESLint 配置
├── config                      # 编译配置目录
│   ├── dev.js                  # 开发模式配置
│   ├── index.js                # 默认配置
│   └── prod.js                 # 生产模式配置
├── package.json                # Node.js manifest
├── dist                        # 打包目录
├── project.config.json         # 小程序项目配置
├── src # 源码目录
│   ├── app.config.js           # 全局配置
│   ├── app.css                 # 全局 CSS
│   ├── app.js                  # 入口组件
│   ├── index.html              # H5 入口 HTML
│   └── pages                   # 页面组件
│       └── index
│           ├── index.config.js # 页面配置
│           ├── index.css       # 页面 CSS
│           └── index.jsx       # 页面组件,如果是 Vue 项目,此文件为 index.vue

入口组件

每个taro项目包含一个入口组件及入口配置:

  • 我们可以在入口组件中设置全局状态或访问小程序入口实例的生命周期
  • 我们可以在全局配置文件中设置页面组件的路径、全局窗口、路由等信息
入口组件可访问的生命周期(除react生命周期外)

onLaunch (options)

  • 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  • 在此生命周期中通过访问 options 参数或调用 getCurrentInstance().router,可以访问到程序初始化参数。

componentDidShow (options)

  • 程序启动,或切小程序每次进入到前台触发。
  • 参数与 onLaunch 中获取的基本一致
  • 可以做一些实时动态更新的数据

componentDidHide ()

  • 小程序被切换到后台(包括微信自身被切换到后台或者小程序暂时被切换到后台)。
  • 可以在这个方法中共做一些数据的保存。

onPageNotFound (Object)

  • 程序要打开的页面不存在时触发。
  • 可以在 onPageNotFound 回调中进行重定向处理,但必须在回调中同步处理,异步处理(例如 setTimeout 异步执行)无效。

页面组件

页面组件是每一项路由将会渲染的页面,每一个页面组件也会有一个页面配置

页面组件可访问的react生命周期

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

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

componentWillMount ()

onLoad 之后,页面组件渲染到 Taro 的虚拟 DOM 之前触发。

componentDidMount ()

  • 页面组件渲染到 Taro 的虚拟 DOM 之后触发。
  • 此时能访问到 Taro 的虚拟 DOM(使用 React ref、document.getElementById 等手段),并支持对其进行操作(设置 DOM 的 style 等)。
  • 但此时不代表 Taro 的虚拟 DOM 数据已经完成从逻辑层 setData 到视图层。因此这时无法通过 createSelectorQuery 等方法获取小程序渲染层 DOM 节点。 只能在 onReady 生命周期中获取。
页面组件可访问的小程序生命周期

onLoad (options)

小程序注册完成后,加载页面,触发onLoad方法(一个页面只会调用一次)

componentDidShow ()

页面显示/切入前台时触发。

子组件监听页面组件的onShow taro-docs.jd.com/taro/docs/r…

onReady ()

  • 首次显示页面,页面初次渲染完成
  • 从此生命周期开始可以使用 createCanvasContext 或 createSelectorQuery 等 API 访问小程序渲染层的 DOM 节点。

子组件监听页面组件的onReady

只在页面组件才会触发 onReady 生命周期。子组件可以使用 Taro 内置的消息机制监听页面组件的 onReady() 生命周期:taro-docs.jd.com/taro/docs/r…

componentDidHide ()

页面隐藏/切入后台时触发。

子组件监听页面组件的 onHide taro-docs.jd.com/taro/docs/r…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改