hippy-react 三端同构
原创
1. Hippy简介
1.1 简介
Hippy (https://github.com/Tencent/Hippy) 是腾讯在2019年12月20日开源跨端框架。
Hippy 在腾讯内部已经运行了3年，支持了18款线上业务，日均PV过亿，形成了一套完整的生态。
与其他跨端框架相比，Hippy紧贴W3C标准，对前端开发者更加友好，同时支持 React 和 Vue 两大前端主流框架
Hippy 官方文档： http://hippyjs.org/#/guide/integration
1.2 @hippy/react
@hippy/react 是基于 Facebook React 的官方自定义渲染器 react-reconciler 重新开发的 React 到终端的渲染层，可以使用 React 16.+ 的大部分特性。
在语法上 @hippy/react 更加接近底层终端，使用了类似 React Native 的语法。
*注*： 由于 Hippy 页面挂在一个节点上，所以 Portals 暂时无法支）
1.2 @hippy/react-web
该项目仍在开发中，有不完善的地方
考虑到客户端页面在不少场景下，需要提供web版本，例如分享页，h5版本的应用。
Hippy 提供了 @hippy/react-web 框架来支持 @hippy/react 项目通过转译，生成可以运行在浏览器中的版本，从框架上支持三端同构，减少开发成本
@hippy/react-web 是通过实现 @hippy/react 的组件的方式，每个组件提供相同的功能和相同的api，从而达到直接将 @hippy/react 项目代码直接转化为 web 版本
2. 三端同构思路
Hippy 可以便捷地实现三端重构
2.1 架构图
@hippy/react使用Virtual Dom维护组件的布局，通过Native Renderer对组件进行渲染，在终端中显示出来@hippy/react-web通过Component实现@hippy/react组件的功能，同时使用Adapters实现原生组件的特性- 使用
Hippy开发的项目，只组要简单进行打包配置，就可以实现多端兼容。
2.2 项目三端同构思路
在实际的业务开发过程中，会遇到很多需要同时出现的app和web的页面需求，使用hippy可以简单实现这一需求。
使用 Hippy 进行三端同构，主要思路是：
- 页面功能，组件的表现尽可能在三端表现一致
- web页面抛弃 CSS 文件，通过
StyleSheet来管理页面组件样式 - 各端特性化功能，通过独立文件维护：
\*\*.hippy.jsx\*\*.web.jsx - 各端代码独立webpack打包入口，实现平台特性需求
- 对页面路由做相应的处理
- 在终端中没有
window等浏览器的全局变量，所以在终端中调用这些变量会导致页面挂掉
2.3 项目文件架构
创建
Hippy项目，可以参考 Hippy-React脚手架开发，快速创建项目
2.3.1. 项目文件结构
build/ // webpack 配置
├── hippy-webpack.android-vendor.js // 打包android基础vendo
├── hippy-webpack.android.js // 打包android业务代码配置
├── hippy-webpack.dev.js // 终端本地调试配置
├── hippy-webpack.ios-vendor.js // 打包ios基础vendo
├── hippy-webpack.ios.js // 打包ios业务代码配置
├── hippy-webpack.web.dev.js // web 开发配置
├── hippy-webpack.web.js // web 打包配置
├── run-ios.js // 拉起IPHONE模拟器
├── template.html // web index.html 模板
└── vendor.js // 配置vendo
index.js // 原生入口
index.web.js // web 入口2.3.2 @hippy/react 重定向
在 web版本的 webpack 配置文件中，通过alias的方式，将'@hippy/react' 替换成 '@hippy/react-web'
// build/hippy-webpack.web.dev.js
// build/hippy-webpack.web.js
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: [path.resolve(\_\_dirname, '../node\_modules')],
alias: {
'@hippy/react': '@hippy/react-web',
},
},2.3.3 入口文件
* 终端入口文件
// index.js
import { Hippy } from '@hippy/react';
import App from './App';
new Hippy({
appName: 'demo',
entryPage: App,
}).start();* web 入口文件
import { Hippy } from '@hippy/react';
import App from './App';
import \* as serviceWorker from './serviceWorker';
import './index.css'; // 通过引入css文件，对浏览器组件默认样式进行处理，以及一些需要使用伪元素的样式
new Hippy({
appName: 'demo',
entryPage: App,
}).start();
// 使用serviceWorke
serviceWorker.unregister();2.3.4 平台个性化逻辑处理
Hippy 通过 Platform.OS 提供了平台判断，开发者可以根据平台实现不同的逻辑
import { Platform } from '@hippy/react';
const ISWEB = Platform.OS === 'web';
handleGoto (url) {
if (ISWEB) {
window.open(url)
return;
} else {
// 调用原生跳转逻辑
}
}3. 优缺点
3.1 优点
- 减少开发量，提高开发效率
- 在app内体验好
- app实现热更新，快速发布
3.2 缺点
- 需要抛弃一些平台特性，例如CSS的伪元素，transition等，某种情况下增加了开发复杂度
Hippy暂时对Navigator支持较弱，是通过创建新的Hippy实例来实现多页面，页面间的数据同步比较麻烦Hippy页面是在终端的一个View Container中，因此安卓物理返回键需要做特殊处理- 部分组件尚未实现多端接口统一，例如
@hippy/react-web中的ScrollView组件的style属性尚未支持数组格式
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。