聊聊腾讯的跨端开源框架 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 一致，