Hippy 3.0 前端框架升级实战：hippy-react、hippy-vue、hippy-vue-next 的 SDK 升级、API 变更与验证要点

跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载本文围绕 Hippy 3.0 前端 SDK 的升级指引展开覆盖 hippy-react、hippy-vueVue 2.x、hippy-vue-nextVue 3.x三类框架的依赖升级步骤、组件与接口变更点、升级后的验证关注点以及 3.0 带来的 Performance API 与 Layout 引擎切换等新特性。读完后你可以按版本组合完成业务工程的依赖升级、重编 JS common 包并对 Move 操作、事件冒泡/捕获、动画表现等重点场景做回归验证。升级依赖项变更升级 3.0 的第一件事是核对业务工程中各hippy/*包与react/vue的版本组合。下面按框架分别给出官方指引中的完整升级清单。hippy-react如果业务目前使用 React 来开发 Hippy需先确认两个前置条件当前hippy/react的版本以及工程中react的版本16 还是 17。场景一hippy/react版本小于 2.12.0且 React 使用的是 16 的版本需要升级如下版本1删除 react-reconciler 依赖 2hippy/react 升级到 3.3.0 及以上 3新增 hippy/react-reconciler 依赖使用react17的tag即 hippy/react-reconciler: react17 4React 版本升级到 17即 react: ^17.0.2 5如果使用了 hippy/react-web 包做h5同构则需要升级 hippy/react-web 到 3.3.0 及以上场景二hippy/react版本大于 2.12.0且 React 使用的是 17 的版本需要升级如下版本1hippy/react 升级到 3.3.0 及以上 2升级 hippy/react-reconciler 依赖使用react17的tag即 hippy/react-reconciler: react17 3如果使用了 hippy/react-web 包做h5同构则需要升级 hippy/react-web 到 3.3.0 及以上需要业务使用新的 hippy-react 重编 js common包。这一点可以直接从仓库源码得到印证hippy-react 的 package.json 中dependencies已经固定为hippy/react-reconciler: react17与react: ^17.0.2且不再包含旧的react-reconciler依赖与上述升级清单完全一致。hippy-vue如果业务目前使用 Vue 2.x 来开发 Hippy需要升级如下版本依赖1hippy/vue 升级到 3.3.1-rc.1 及以上 2hippy/vue-native-components 升级到 3.3.0 及以上 3hippy/vue-router 升级到 3.3.0 及以上 4hippy/vue-css-loader 升级到 3.3.0 及以上 5hippy/vue-loader 升级到 3.3.0 及以上 6vue 和 vue-router 等vue相关依赖无需升级需要业务使用新的 hippy-vue 重编 js common包。hippy-vue-next如果业务目前使用 Vue 3.x 来开发 Hippy需要升级如下版本依赖1hippy/vue-next 升级到 3.3.0 及以上 2hippy/vue-css-loader 升级到 3.3.0 及以上 3hippy/vue-router-next-history 升级到 0.0.1 4vue 和 vue-router 等vue相关依赖无需升级需要业务使用新的 hippy-vue-next 重编 js common包。可以对照仓库确认这几个包均已包含在 monorepo 中hippy-vue、hippy-vue-next、hippy-vue-native-components、hippy-vue-css-loader、hippy-vue-loader其中hippy/vue-next声明了对vue/runtime-core3.4.32、vue/shared3.4.32的 peerDependencies这也呼应了vue 相关依赖无需升级的前提——3.0 SDK 是与现有 Vue 3.x 运行时对齐的升级压力集中在hippy/*一层。接入与使用方式变更接入 Hippy-React、Hippy-Vue、Hippy-Vue-Next SDK 的代码方式无变化可参考 前端集成指引。具体变化点如下iOS 新增节点层级优化算法Android 优化了现有的层级优化算法。 该算法会将仅参与布局的 View 节点优化去除从而提升渲染效率。请注意由于该算法的存在可能导致依赖特定 UI 层级结构的 native 组件发生找不到特定 View的异常。 此时可以通过前端代码中给特定 View 增加collapsable: false属性来禁止该节点被优化算法去除。从源码结构看collapsable是一个跨端落地的节点属性而不仅仅存在于前端 SDKAndroid 端的 NodeProps.java、HarmonyOS 端的 hr_node_props.h 均定义了对应的属性解析前端侧 view.tsx 等基础组件也透传了该属性。也就是说当某个自定义 native 组件如需要按层级查找子 View 的容器在 3.0 下报错时第一步排查就应是给被拍平掉的中间 View 补上collapsable: false。组件变更以下 5 个组件级变更是升级时最容易踩坑的地方需逐条自查dialog 组件第一个子元素不能设置{ position: absolute }样式。如果想将 dialog 内容铺满全屏可以给第一个子元素设置{ flex: 1 }样式或者显式设置 width 和 height 数值。Image 组件废弃了source、sources、srcs字段建议使用src字段代表图片 url。iOS Image 组件默认没有实现图片缓存由于实现机制的变化需要业务 iOS 端自行实现缓存管理详细可参考 iOS 升级指引。hippy-vue scoped 样式隔离2.15 以前的版本不支持 scoped 样式隔离2.15–2.17 的版本如果没有开启Vue.config.scoped true;也不支持 scoped 样式隔离。Vue 3.0 默认开启 scoped无需设置开关。hippy-vue 布局属性书写方式height、width等布局属性在 3.0 的版本将不支持放在自定义属性里如div :height36 :width36 需要放在style属性中如div :style{height: 36, width: 36} 第 5 点的背景可以从 C DOM 侧得到解释3.0 中节点属性统一走 DOM 层的属性解析见 node_props.hheight/width这类布局语义被归入 style 通道处理而不再作为节点属性透传因此旧写法在 3.0 下会静默失效必须迁移到:style中。接口定义变更3.0 对前端接口面做了收敛以下是 5 个明确的变更点hippy-react 不再导出RNfqb、RNfqbRegister、RNfqbEventEmitter、RNfqbEventListener方法。业务侧如有引用需要移除或替换。hippy-react animation 模块建议统一使用destroy()仍兼容历史错误写法destory()已标记废弃后续可能移除。hippy-react animation 事件监听不再支持onRNfqbAnimationXX兼容写法统一用onHippyAnimationXX或者onAnimationXX。动画对象的初始化时机hippy-react 初始化动画对象new Animation需要在根节点渲染之后否则会因为 Dom Manager 未创建提示报错hippy-vue/hippy-vue-next 初始化动画对象new Animation需要在Vue.start 回调之后否则会因为 Dom Manager 未创建提示报错。颜色渐变动画需显式指定 valueTypehippy-react/hippy-vue/hippy-vue-next 如果使用了颜色属性的渐变动画需要显式指定 color 单位添加valueType: color字段例如animation: new Animation({ startValue: red, toValue: yellow, valueType: color, // 颜色动画需显式指定color单位 duration: 1000, delay: 0, mode: timing, timingFunction: linear, }),从源码结构看第 4、5 点的变化与 3.0 的实现迁移方向一致动画不再走 JS bridge 模块而是下沉到 C DOM 模块实现仓库中 animation.h、animation_manager.h、cubic_bezier_animation.h 等头文件对应了这一层 C 实现。由于 C 侧需要依据valueType区分颜色插值与数值插值颜色动画才必须显式标注单位而Dom Manager 未创建的报错则直接对应动画管理器挂载在 DOM 场景之上的生命周期约束。验证关注点Hippy 3.0 前端架构的四大改动点Hippy 3.0 前端架构升级主要有如下改动点JS 驱动上屏的方式由UIManagerModule变为了SceneBuilder。Node API 重新实现了 Move 计算逻辑。Event 由前端分发变为 DOM 分发。动画由 bridge 模块变为 C DOM 模块实现。这四点都能在仓库中找到落点旧的上屏通道 UIManagerModule.js 仍然存在但 3.0 的节点上屏走 scene_builder.h / scene_builder.cc 这条 C 链路Move 重算与事件分发则落在 DOM 层的节点与 diff 逻辑如 diff_utils.h中。回归验证的三个重点升级后需要验证关注界面的 UI 视图渲染正常UI 结构、样式属性等特别关注 Hippy-React/Vue 中因为条件渲染语句产生的节点Move操作表现是否正常——由于 Move 计算逻辑重新实现v-if/条件渲染导致的列表项增删移动是回归重点UI 事件点击、滑动等表现正常特别关注事件冒泡、捕获等表现是否正常——事件分发主体从前端换成了 DOM 层事件链路的顺序与终止行为需要重点验证关注动画表现是否正常——动画实现主体迁移到 C DOM 模块timing 函数、颜色渐变、延迟与循环等参数表现需要逐一核对。新特性Performance APIHippy 3.0 实现了基于前端规范设计的性能 API接入方式可参考 Performance。Layout 引擎支持切换Hippy 3.0 支持了 Layout 引擎的无缝切换项目可保持Yoga引擎也可以选择 Hippy 自研的Taitank引擎。详情可参考 Layout。从源码结构看两种引擎以布局节点的策略类形式共存于 DOM 层yoga_layout_node.h 与 taitank_layout_node.h 分别对接 Yoga 与 Taitank上层的 layout_node.h 负责统一抽象这正是无缝切换能够成立的结构基础——业务侧无需感知布局引擎差异。小结3.0 的前端升级可以概括为三步一是按框架版本组合完成hippy/*依赖升级并重编 JS common 包二是处理组件与接口层面的 55 个变更点dialog 子元素布局、Image 字段与缓存、scoped 开关、:style布局属性、RNfqb 系列 API 移除、destroy 拼写、动画初始化时机与valueType: color三是围绕 Move 操作、事件冒泡/捕获、动画表现三条主线做回归必要时用collapsable: false修复层级优化导致的 native 组件查找异常。升级的接入代码本身无需变化成本主要集中在依赖版本核对与行为回归上。赞分享跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载相关推荐Hippy 3.0 架构升级指引React / Vue / Android / iOS SDK 适配完整实践Hippy 3.0 架构升级指引React / Vue / Android / iOS SDK 适配完整实践 本文基于 Hippy 官方升级文档系统讲解 H跨平台移动开发前端Hippy-Vue-Next 完全指南基于 Vue3 的 Hippy 跨端渲染框架、SSR 服务端渲染与 API 差异详解Hippy Vue Next 完全指南基于 Vue3 的 Hippy 跨端渲染框架、SSR 服务端渲染与 API 差异详解 本文以 Hippy 仓库的官方文档跨平台移动开发前端Hippy-Vue 路由实战hippy/vue-router 接口、原生返回键与 HippyHistory 实现解析Hippy Vue 路由实战hippy/vue router 接口、原生返回键与 HippyHistory 实现解析 Hippy Vue 使用对 vue r跨平台移动开发前端上一篇WarcraftHelper3分钟让你的魔兽争霸3在现代电脑上流畅运行下一篇5分钟快速上手Mermaid Live Editor无需代码基础让图表创作变得如此简单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考