初识React Native

概述

React Native 是一款用来开发原生移动应用的JavaScript框架，目前可支持IOS和Android平台。

React Native 是基于React（Facebook开源的一款JavaScript用户界面开发框架）而产生的。本质区别在于，React将浏览器作为渲染平台，通过Web组件进行开发；而React Native是将移动设备作为渲染平台，使用原生组件进行开发。所以说，如果你已熟知React一些特性，如JSX，props，state，组件生命周期等，会对你学习React Native开发增速不少。

为何选择React Native

我们熟知的其他开发模式

现有的跨平台开发方案，如Cordova或Ionic这种方案的优势在于门槛低，只要懂前端基础（Html，JavaScript，Css）就能快速上手；同样支持多平台共享一套代码，开发效率高。但其也存在不容忽视的问题，一是性能损耗明显；二是我们无法使用宿主平台原生的UI组件，例如我需要IOS平台的日期选择效果，就要自己手动实现，费时费力，且一些细节特效难以实现，这样做出的应用就显得有些“山寨”。

原生开发模式，这种方式优势在于，应用性能高，效果自然。但缺点也是明显的。首先多平台就要多套代码去维护，需要更高的开发成本；另外我觉得入门门槛略高。

React Native优势

性能与原生应用几乎无差别，React Native将JS代码解析成真正的原生UI组件，利用了宿主平台上现有的视图渲染方式，绝大多数情况下，其性能可与原生方式媲美。

学习门槛低，前端开发人员，了解React基础知识，即可上手开发。

开发体验好，由于使用了JavaScript，通过热加载机制，可边修改代码边查看结果，而不用重新编译代码。这就如同开发网页一样，效率极高。

代码复用度高，React Native开发的应用，其大部分代码可以被不同平台复用。Facebook Ads Manager的安卓应用，共享使用了其IOS版本87%的代码。

风险与劣势

升级快，React Native 还处于不断完善中，其通过快速的升级来修复自身存在的问题，所以或多或少会对开发带来一些影响。

一些特性在IOS和Android平台还不支持，需要通过原生代码实现，对于只懂前端不懂原生的开发者来说，会有一些劣势。

国内的网络环境，导致一些依赖可能无法直接下载，需要在社区查找或通过VPN方式进行下载。

React Native基本原理

React Native 的原理可概括为，虚拟Dom+桥接。

虚拟Dom

如果你熟悉React，这个概念一定不会陌生，虚拟Dom是一个中间层，介于开发者表述的视图和实际渲染在页面的视图之间，它是一个内存版的Dom。React通过维护这个内存版Dom，计算出必要的最小操作然后重新渲染，从未大幅提升Dom操作性能。下图展示了虚拟Dom的执行过程。

桥接

对于web开发者而言，虚拟Dom的主要作用就是提升性能，但其有一个潜在能力，就是它实现了强大的抽象能力，我们可将虚拟dom理解成为一个抽象层，这个抽象层能够调用浏览器渲染web界面，同样可以调用其他宿主平台。

对于React Native而言，它可通过调用Object-C去渲染IOS组件，也可以调用Java去渲染Android组件。这个功能我们称之为“桥接”。“桥接”使得React Native可调用宿主平台开发的组件。下图为桥接示意图。

小结

本文介绍了React Native的优缺点以及其基本原理，并将它与其他开发方式做了大致比较。总体来看，选择React Native相对还是不错的。我个人多年从事前端开发工作，所以通过React Native上手原生应用开发会更为合适。当然，技术的选型，还是要看项目的具体需要。如果你想继续了解React Native，我将在后面的文章逐步深入对其进行介绍。下一篇，我将逐步介绍如何编写一个简单的React Native 应用。