React Native 三端同构实战（2）ReactNative 三端同构方案对比

look_w

ReactNative 三端同构方案对比目前社区中已经有多个 React Native 三端同构方案，比较成熟的有 和  ，下面分别介绍这两种方案并从多方面对比二者以帮助你做出合适的选择。
认识        reactxpreactxp 是一个跨平台的开源 UI 库，由微软 Skype 团队维护，Skype 产品中就大量使用了它来实现写一份代码运行在多个平台上。目前 reactxp        支持以下平台：

• iOS/Android：基于 React Native 渲染。
• Web：基于 react-dom 渲染。
• ：基于 渲染。
• 其他平台 （如 Mac、Windows10 以下系统、Linux 桌面）：基于 Web 渲染的 。

reactxp 实现原理reactxp 充份发挥了 React 虚拟 DOM 的优势，它其实只是充当胶水的作用，把各个平台的渲染引擎整合起来，对外暴露平台一致的接口，reactxp 架构如图 2        所示：
图 2. reactxp 架构reactxp 为各个平台都实现了一份代码，在构建的过程中构建工具会自动选择平台相关的代码进行打包输出。
reactxp 的优缺点优点

• 写一份代码就可实现多端渲染，对于有多端需求的产品可以减少代码量和人力。
• 由微软 Skype 团队维护并且用于 Skype 产品中，有大公司投入资源支持。
• 基于 TypeScript 编写，对 IDE 友好。

缺点

• 为了抹平多端平台差异导致灵活性降低，暴露的组件和 API 较 react-native 要少很多。
• 需要兼容 UWP 平台导致包袱更重，而目前会针对 Windows 桌面或手机开发应用的产品在渐渐减少，大多数产品不需要支持 Windows 平台。
• 需要多导入 reactxp 这个库，导致打包输出的 bundle 会变大；并且由于多了一层适配，运行时性能肯定不如直接使用 React Native。

其中最为致命的缺点可能在于目前 reactxp 支持的组件和 API 相当匮乏，一些比较细的操作无法控制。如果你的项目中确实有超出 reactxp        的能力范围的需求，可以通过导入和使用 React Native 实现，但这会导致整个项目脱离 reactxp 体系而无法实现多端同构。reactxp        只保证在它的体型内实现多端同构，但在其体系内却有很多 API 不可用。
reactxp 和 React Native 的异同点从使用层面来说它们最大的区别在于：用 reactxp 写的一份代码可以在多个平台运行，而 React Native        是学会它后可多个平台编写原生应用但还得为不同平台编写不同代码。
这一点从 reactxp 和 React Native 暴露出的 API 就可以看出来：React Native 中有大量诸如        SegmentedControlIOS、PermissionsAndroid 这样针对特定平台的 API，而 reactxp 中所有的 API 在所有端中都可以正常调用。
事实上 React Native 也在为多端接口统一做努力，React Native 中的大多数接口是可以在多端运行一致的，但为了保证灵活性 React Native        也提供了平台相关的接口。而 reactxp 抹平了多端接口的差异，但这也导致 reactxp 灵活性降低。
二者的相同点是都采用了 React 框架编程的思想，由于 reactxp 是基于 React Native 封装的导致两者大多数 API 的使用方式都是一致的。
认识 react-native-webreact-native-web 是由 Twitter 工程师 Nicolas Gallagher 实现并维护的开源项目，目前已用在 Twitter、Flipkart、Uber        等项目中，它支持把 React Native 编写的项目转换成 Web 应用。
为 React Native 项目接入 react-native-web 成本极低：react-native-web 对原项目没有侵入性，无需改动原来的代码，只需在项目中加入一些        webpack 构建配置即可构建出运行出和 React Native 应用一致效果的 Web 应用。
react-native-web 实现原理react-native-web 实现了在不修改 React Native 代码的情况下渲染在浏览器里的功能，其实现原理如下：
在用 webpack 构建用于运行在浏览器里的代码时，会把 React Native 的导入路径替换为 react-native-web 的导入路径，在        react-native-web 内部则会以和 React Native 目录结构一致的方式实现了一致的 React Native 组件。在 react-native-web        组件的内部，则把 React Native 的 API 映射成了浏览器支持的 API。react-native-web 架构如图 3 所示：
图 3. react-native-web        架构react-native-web 和 reactxp 异同点react-native-web 和 reactxp 的目的都是为了实现多端同构，但 react-native-web 只专注于 Web 平台的适配，而 reactxp 则还需要适配        UWP 平台。
在实现 Web 平台的适配过程中它们都采用了类似的原理：把对外暴露的 API 或组件映射到 Web 平台去。但在实现 Web 平台的样式适配时二者有细微区别：

• reactxp 全部通过内联样式实现。
• react-native-web 通过为每条不同的样式生产一个 className，对于重复出现的样式则通过复用 className 实现。

对于这两种不同的实现方式，我更看好 react-native-web 的实现方式，原因有两个：

• 通过复用 className 节省网络传输字节，如果你需要做服务端渲染这个优势会凸显出来。
• 通过 className 的方式浏览器渲染性能更好，因为浏览器有做样式计算缓存优化，有人专门写了 。

表 1 列出了 reactxp 和 react-native-web 在其他方面的对比：
表 1.        react-native-web 和 reactxp 的对比对比项reactxpreact-native-web对比结果 维护人  微软 Skype 团队和 GitHub 社区  来自 Twitter 的个人  和 GitHub 社区  reactxp 小胜  服务端渲染支持   完全支持  react-native-web 胜  Web 端包大小  435KB  354.4KB  react-native-web 胜  写代码效率  针对 reactxp 暴露的 API 去实现多端适配  需要自己去验证代码在多端的表现是否一致  reactxp 胜  学习成本  除了需要学习 reactxp 外，不可避免的还需要学习 React Native  只需学习 React Native 即可  react-native-web 胜  Github 数据  start=2017 年 4 月 star=6521 issues=23/739 commits=814  start=2017 年 7 月 star=10151 issues=45/1034 commits=1248  react-native-web 用户更多，代码变动频率更大。reactxp 问题响应速度更快。
如何选择如果你开发的产品有适配 UWP 平台的需求就选择 reactxp，否则选择 react-native-web，因为 reactxp 相比于 react-native-web        除了多支持 Windows 平台外，并无其它明显优势。