聊聊腾讯的跨端开源框架 Hippy
- 2021-6-25
- hippy
Hippy 简介
hippy /'hipi/
hippy的跨端方案思路和 React Native 一致,使用 v8 引擎执行 JavaScript 逻辑代码,使用原生组件的方式渲染UI以提升性能。但是hippy相较 React Native 而言,有以下优势:
1. 更轻量。更小的安装包、打出的JS bundle包体积也更小,只有React Native的一半左右。
2. 渲染性能比React Native 更好。
3. 和 Web 接近的开发体验。
> Hippy 在开发体验上也进行了大量优化,包含但不限于,跟浏览器一样的 onClick、onTouch 系列触屏事件,更加简单的动画方案,hippy-vue 提供了和 Vue 的完全兼容等等。
在开发体验这一点上,hippy也是远远优于React Native 的。后文介绍了hippy跨端原理,
为什么 hippy 可以跨端?
我们看看 hippy-react 和 hippy-vue 的架构图就明白了。
因为两者均支持 vDOM并支持自定义渲染器,hippy-react基于React 的React-Reconciler 实现了自定义渲染器,而 hippy-vue 基于 Vue 3 的 createRenderer()
实现自定义渲染器。
这其实也解释了为什么 hippy 到目前为止也只支持这两个前端框架,不支持 svelte 等其他框架。如果需要 hippy 支持一个前端框架,那么至少得让这个框架有自己的 vDOM 并支持第三方自定义渲染器去渲染它的 vDOM 组件节点树 。市面上也恰好只有 React 和 Vue 支持这些,并且技术相对比较成熟。
Hippy 作为 React Native 的后继者,同样基于 Facebook React 的官方自定义渲染器 react-reconciler 重新开发了 React 到终端的渲染层,可以使用React 的全部特性,在语法上和 React Native 类似,但更轻量、性能相对而言更好。
渲染中最重要的是什么——布局 (layout)。Facebook 为 React Native 用C++ 实现了 yoga 布局引擎。QQ浏览器团队也是比较厉害,参考了 chromium 中的布局引擎、Facebook 的 yoga 布局引擎硬是为 hippy 实现了自己的一套非常简洁的布局引擎 HippyLayout 。而且在开发中他们也是以 yoga 为性能基准,对 HippyLayout 进行性能调优的。
此处注意,yoga 和 HippyLayout 都是 Flex 布局引擎。这意味着,在一个 hippy 项目中,你应该尽可能地使用 flex 去实现布局需求(事实上,在我经手的大部分 Web 项目中,我都是 Flex 一把梭,基本可以解决80% 的布局需求)。
我们关心的几个问题
- hippy是不是同时支持ios和android?
结论:既然是跨端框架,当然是都支持的。Android端集成文档、iOS端集成文档
- hippy的定制化程度高不高,比如他的长列表标签里面是不是前端随便怎么写都行?
结论:是的,可定制化程度非常高,甚至可以一个列表中渲染多种样式的列表项。
需要注意的点
1. 样式
- Hippy 的所有样式支持由终端直接提供,基本和浏览器一致,但不支持百分比布局。目前Hippy支持具体数值,单位是 dp
。具体换算公式为:
\(实际真机长度值 = 屏幕缩放比例 * Hippy 样式长度值\)
- Hippy采用了CSS标准盒模型构建,对应的是 CSS 的box-sizing: border-box
,这也意味着你不能在 Hippy 中通过修改 box-sizing
来修改 Hippy 盒模型的行为 (注:在浏览器CSS盒模型中, box-sizing
的默认值是 content-box
)。
- 使用 Flex布局。前面提到,Hippy用C++实现了自己的 Flex 布局引擎 HippyLayout。因为 Hippy 仅支持 Flex 布局,所以我们不需要在样式中手写 display: flex
。
- Hippy 使用 CSS-in-JS 的方式编写样式,我们主要通过 @hippy/react 提供的 StyleSheet
类来统一管理组件的样式。
2. 动画
由于 Hippy 替换掉了 Webkit 使用 vDOM 映射到原生 Native RenderPipeLine (原生渲染管线)的方式渲染界面。这意味很多 CSS 特性我们都不能使用,包括 CSS 动画。Hippy 动画的原理是由前端传入动画参数,由原生终端去控制每一帧的计算和排版更新,减少了前端与终端的通信次数,减少了动画的卡顿。
总结
得益于 React 和 Vue 的 vDOM 。采用 JSEngine + Native RenderPipeLine (JS 引擎负责执行通用业务主逻辑、原生渲染管线负责渲染界面),思路和 React Native 一致,