基于React Native浅谈多端融合技术

首先讲述几个概念：

1，原生：android + ios
2，web端：H5 + CSS + JS
3，小程序：wxml + wxss + js
4，大前端：各端融合之后的产物，采用的技术就是多端融合技术

虽然原生开发用户体验好，但是开发成本和发版成本都比较高，而单纯的web开发虽然可以跨平台，开发成本低，但是用户体验差，而且访问原生的能力受限。因此将web开发和原生开发打通融合就成为大前端新的发展趋势。比较热门的就是FaceBook公司2015年推出的跨平台移动应用开源框架React Native。

由于React Native使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此学习成本比较低，兼顾了web开发效率和原生应用性能。RN除支持移动原生外，还支持windows桌面，跨端的关键在于虚拟DOM。传统浏览器模型中DOM是性能瓶颈，浏览器大部分时间用来处理DOM的交互和更新。React框架中，构建了一个虚拟DOM的中间件，所有的操作和交互并不是立刻刷新DOM，而是由React框架来计算出虚拟DOM和正式DOM直接的diff，然后只刷新diff部分，可以达到性能最优，而React Native可以通过虚拟DOM调用原生控件进行渲染。

React Native的局限性：

1，官方不支持web端，就是说没办法将RN的代码直接放在浏览器中运行
2，官方不支持热更新，RN现阶段还达不到H5那样灵活发版在线更新，有人在用微软的 codePush，不过codePush也有一定的局限性，可以尝试自己搭建服务器实现RN的动态更新
3，原生能力有限，不支持多媒体，而且当scrollview和listview相互嵌套时也会引发手势冲突
4，复杂场景下内存性能有瓶颈

2018年Google发布了一款新的多端融合技术框架Flutter，Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题，即用Dart程序语言来编译，Dart是用预编译的方式编译多个平台的原生代码。但是Dart对开发者增加了学习成本，且UI布局复杂，不如XML可读性高。Flutter支持的库不如React Native和原生多，而且很多组件需要重新开发，不如React Native灵活。

国内一些大公司在基于React Native的基础上，结合业务需求对React Native进行深度定制，封装组件，功能扩展，在自主研发的ide里支持将RN代码一键转化为H5和小程序代码，而且可以进行双向转换，实现多端支持。

秉承 write once，run everywhere 的原则，未来肯定会有越来越多的多端融合技术将各端技术进行打通融合，提升开发人员的开发效率，降低不同平台的迁移成本。作为开发人员，我们有必要深入了解不同开发平台的基础原理，以及它们之间的差异性，为未来的技术趋势做好准备。