React Native 三端同构在雪球的实践

随着移动互联网的迅猛发展，目前市面上「端」的形态多种多样，iOS、Android 、H5、微信小程序等各种端大行其道，同一个业务需求往往又需要在多端上去实现，针对不同端去编写多套代码的成本显然非常高。雪球大前端团队将今年在跨端能力建设上的演进和推广工作整理成系列文章。

本文为第三部分，介绍今年雪球大前端团队在三端同构建设上相关工作：

• RN / H5 同构的能力及效果
• 样式组件系统的优势及定制实现
• 同构 H5 的实现及服务端渲染 SSR
• 同构的 CICD、单元测试及开发测试流程
• 同构的 D2C 代码智能生成

一、背景

雪球前端的业务场景除了雪球 App 外，还有重要的一环是微信私域 H5。各需求优先在客户端 App 内实现后再同步到微信 H5，至少要投入 iOS、安卓、H5 三端的开发资源。在人力资源有限的情况下，经常会出现多需求和多开发岗位相互交叉的错综复杂关系，多岗位协同难免会造成效率降低和资源浪费。

那么有没有一种技术，能在效率、体验、成本、通用性上取得最大化的平衡，甚至打破传统的技术栈划分，进而实现三端融合同构呢？

放眼业界，各大公司不约而同也在探索跨端融合。Facebook 最早推出 React Native 支持开发双端，谷歌后来居上推出 Flutter 并不断迭代，阿里则以闲鱼为代表在推动大前端的融合，字节&快手都在大力推进自己的跨双端开发框架，比如 lynx 等。目前市面较成熟的方案是双端的融合。其中 React Native 是中小型公司较好的选择，能以较低成本为客户端提供双端同构和动态化能力。

但 RN 开发有门槛难上手、代码繁琐、多端需单独适配，并且在雪球的业务场景下，优先用 RN 开发完客户端功能后，还要再次投入资源开发微信中的 H5 。

带着上面的问题，雪球大前端 FE 团队今年着力于三端同构的建设，实现了 RN / H5 同构的落地方案，极大程度上抹平了 Native、RN、H5 的技术割裂。目前三端同构已经在雪球的私募基金、公募基金、雪盈、社区等多个业务的复杂场景下进行了应用实践。

RN / H5 同构方案最适合以 App 开发为主，并需要把 App 内功能同步到微信 H5 生态的业务场景。对于想实现 App 动态化、提升人效的中小型公司有借鉴意义，也提供了可落地的实操指南。

二、 RN / H5 同构的能力与方案

2.1 同构关键能力

1. 一套代码三端运行

一套代码 iOS / Android / H5 三端运行，通过 RN 为客户端提供动态化能力，并能同构生成微信 H5。三端代码一致，告别三端单独开发或者兼容适配。

2. 样式组件系统和同构组件库

对 styled system 进行了最简化的雪球定制实现，封装颜色 token、屏幕适配、日夜间模式等，提升 UI 开发体验，样式代码量大幅降低，试过就再也不想写 css。封装雪球同构组件库 snowbox，提供开箱即用的丰富业务组件，提升开发效率并抹平三端差异。

3. 改善 RN 开发体验

将 RN 开发门槛从客户端降低为 Web 开发，初期可在浏览器以 Web 开发方式进行业务逻辑开发和接口联调等，无需启动模拟器或连接真机，中后期也可三端同步开发。

2.2 同构的整体方案

通过三端同构组件库 snowbox 和样式组件系统 styled system 实现 RN 业务代码的快速编写。

客户端部分：通过 React Native 生成双端代码，并为 App 提供动态化能力。同时借助 RN/H5 同构，改善 RN 开发方式，提高开发体验。

H5 部分：通过 React Native Web 将 RN 代码编译为 H5，并实现服务端渲染，将雪球客户端里的 RN 功能和体验完整复刻同步到微信体系。

三、同构的效果展示

结合实际业务场景，从三方面详细展示同构的效果与优势，分别是实际业务页面的同构效果及 H5 的性能分析；采用同构技术栈后，如何改善传统 RN 开发方式和开发体验；介绍了同构组件库的功能和效果。

3.1 业务页面效果

私募基金商品页需求是雪球三端同构方案的第一个落地尝试，针对页面复杂（二十余个复杂模块+6 个二级页）、工期紧张、技术积累不足（开发同学没有 RN 开发经验）等等问题，在需求开发过程中设计并完善了同构方案，引入样式组件系统并封装同构组件库。

同构页面在 APP 中打开速度媲美原生，同时能实现线上热更新，开发人效相比于传统开发提升一倍以上，高效响应业务变化。并且能同步部署 H5，将原本客户端内才有的丰富功能和优秀体验复刻到微信生态，同时赋能业务，客户经理可以很方便在微信内分享传播，客户也能在微信中使用 H5 完成跟雪球客户端内一致的业务全流程。

在使用 RN/H5 同构开发后的三端一致性演示视频如下，包括加载速度、复杂曲线的交互、日夜间主题切换、同构与原生交互、二级页效果等。

同构 H5 的性能

用 React Native 写 Web 会不会像 Flutter 一样无法在生产使用呢？

同设备同网络环境下同构 H5 页面和纯 H5 页面的技术指标对比：(测试采用 m1,横向滑动展示 js 资源加载情况)

项目	技术栈	lighthouse	首次加载 js	总 js
组件库页	RN 同构 SSR	96	205k	205k
私募商品页	RN 同构 SSR	80	270k	270k
私募持仓页	react ssr	82	208k	208k
私募首页	react ssr	68	227k	227k
投顾商品页	vue	65	340k	485k
基金首页	vue	51	340k	359k
基金持仓页	vue	74	340k	369k

可以看到，使用 RN/H5 进行三端同构技术后，页面性能相比于纯 web 开发页面基本持平，在代码分割按需加载方面也没有劣势，不像 Flutter web 那样动辄几 MB 的 js 资源，完全可以在生产环境使用。目前也已在雪球微信服务号、雪球私募、雪球基金及投顾等场景广泛使用。

3.2 RN 开发体验改善

对于大部分同学来说 RN 开发非常不方便。RN 的样式开发、元素审查要一直盯着手机屏幕ÿ