React Native跨平台移动应用开发框架介绍

好久没有来更新博客了，给大家说声抱歉，人一旦懒惰起来连自己都害怕。可能是因为一个人生活，少了很多动力吧。这都是在给自己找理由。我在不偷懒了。
最近我要入坑了，公司安排我要开始搞React Native了，之前也给大家分享过一篇RN的搭建框架，那时候只是对RN感兴趣想有时间学学，但是现在要投入更多的时间。

这周领导让我给搭建分享下RN跨平台开发技术，简单的介绍一下，可是网上关于RN的技术博客很多，语言描述性的缺很少，让初学者没有一个很好的概念去全面的了解RN，所以呢我就大概总结了一下RN跨平台移动应用开发框架的介绍。

前言

随着科技的发展，Android与iOS量大操作系统已经称霸江湖（这种稳定对开发者是一件好事，相互竞争也让两大操作系统都在不断的提升完善）。手机硬件配置越来越强大，能力越来越强大，价格越来越平易近人。手机现在已经成为了普通老百姓无时无刻不随身携带的电脑。伴随着这种趋势，市场对移动应用的需求也越来越多，而且要求越来越高。。

这么多年来，移动开发应用开发者做梦都希望有一个能跨平台的开发工具，让他们不要把同一个移动应用使用不同的开发语言写两遍。但是跨平台开发工具的实现很难，很多先驱者倒在了这条路上。直到Facebook给大家带来了React Native。

简介

2015年3月26日，Facebook公司对外正式发布了React Native – 使用React框架跨平台开发原生移动应用的开源技术框架。开发者可以使用React Native 高效开发Android和iOS操作系统的应用程序。
它的设计理念是：使用React Native开发，即拥有Native的良好人机交互体验，又保留了React框架的开发效率。
（Native是指使用原生开发环境开发的应用程序。Native的良好人机交互体验是指当用户手指在屏幕上操作时，被触摸的UI组件会发生视觉上的变化）
（而React是Facebook从2012年以来慢慢发展起来的一套开发框架，在这套框架上诞生了React.js用来进行网页开发，以及React Native用来进行APP开发。《React、React.js、React native三者的关系后面具体来看》）

特点

1. 一次学习，随处编写

   React Native提出“Learn once, write anywhere”。使用React Native可为Android和iOS两个操作系统开发应用程序，但不同平台上的代码根据平台会有细小区别，但开发思路是相同的。

2. 混合开发

   React Native允许开发者在React Native擅长的领域使用React Native开发，而在React Native不能实现的领域或者已经有原生代码实现好的领域直接使用原生代码。React Native 代码开发模块与原生代码开发的模块可以双向通信、无缝衔接。

   • 混合开发情况3种：
     
     • UI界面由React Native开发，但UI事件处理由原生代码执行。
       
       • 比如登录功能，React Native开发包含用户名、密码输入以及登录按钮控件的界面，用户输入相关信息，点击登录按钮后，React Native组件将用户名和密码传给原生代码编写的登录模块（Android：java开发，iOS：Object-C或Swift开发），让原生代码执行登录操作。原生代码向服务器发送登录请求，并等待回应。在服务器回应后，原生代码将受到的回应中的登录成功与否，以及其它的一些需要向UI展示的数据传递给React Native组件，React Native接收并解析这些数据，执行UI更新，向用户展示。
     • 将原生使用原生代码实现的UI小部件包装成React Native的自定义组件
       
       • React Native支持将Widget（官方、第三方开源、开发者自行开发）包装成React Native的自定义组件，然后在React Native代码中方便的使用。
     • 应用界面在React Native开发的界面与原生代码开发的界面间切换
       
       • 在已用原生代码开发好的项目中加入一些用React Native 开发的新界面，混合开可以做到让应用界面流畅自如地在这两种界面间切换，用户对此不会有任何的感知。

3. 高效的UI开发

   使用React Native开发移动应用的UI界面比使用原生语言快捷高效，再考虑到至少90%的移动界面都可以使用React Native开发，一分代码适配android和iOS两个平台，这相当于减掉了一个开发平台上至少50%的工作量。

   React Native可以实现很多UI之外的功能，但开发UI部分绝对是React Native的强项，这体现在如下四个方面：

   • 独特的UI实现框架
   • 复杂UI界面开发难点的本质问题就是：如何将来自网络侧与用户侧的动态数据高效、实时、正确地呈现在复杂的用户界面上。 FaceBook的React框架是这个问题的一个优秀解决方案。React Native官网描述它的出发点为：用于开发数据不断变化的大型应用程序。相比传统的UI开发，React开辟了一个相当另类的途径，实现了UI界面的高效率、高性能开发。使用React开发，开发者永远只需要关心数据。当数据改变时，开发者只需要告诉React数据变了，有React来实现UI界面的改变。
   • 组件化开发

   • React 推荐已组件的方式去重新思考UI构成，将UI上每个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体的UI的构建。

     React强调将应用划分成多个互不相关的组件，每个组件作为独立的视图。这使得开发者更容易进行软件迭代升级，因为不用在改动某一小部分时把整个系统都梳理一遍。最重要的的是，React包装了复杂而易变的数据到对象的实现，改为提供一个声明式的结构，使得整个程序模型变得抽象而简单。使用React来构建网页或者手机UI时，代码变的更容易预测。这种可预测性使得开发者在快速迭代产品时可以更多地信任已有的代码，最终应用程序也变得更为可靠。更进一步的，React框架不仅仅使扩大应用规模变得容易，也使得团队规模更容易进行调整。
     这样开发出来的代码结构清晰、公用性高、可移植性高。上一个项目的某些组件，可以很方便的拿来在下一个项目中使用；好的开源组件，可以下载后很方便地集成在我们的项目中使用。

   • 跨平台移植代码迅速

   • >使用React Native进行UI开发时，开发者通常在一个平台上开发，然后用这一套代码去另一个操作系统中进行修正。通常需要修正的代码只有总代码的5%甚至更低。
   • 自动匹配不同屏幕大小的手机
   • 使用React Native开发，开发者无须为不同屏幕分辨率准备不同的图片资源或者布局文件，甚至可以不考虑屏幕大小的问题。通过灵活的布局方式，React Native可以做到在不同的手机屏幕上高效、清晰的UI呈现。

4. 高效的UI调试

   使用React Native开发，修改了代码后立刻可以在手机上看到效果，没有重新编译启动程序所需要的时间。并且可以打开一个Chrome窗口，所有的代码都移植到Chrome里面运行，断点调试、单步调试、调用栈追踪这些常用的调试方法都可以进行操作。

5. 学习门槛低、开发难度低

   • 开发语言简单
     
     • React Native使用ECMAScript 2015语言（简称ES 6）以及自创的JSX（JavaScript中加入标签化的XML）来进行开发。对于没有JavaScript知识背景的移动开发人员，只需要花时间熟悉JavaScript的基本语法后就可以使用React Native进行开发。
   • 语法接近自然语言
     
     • React Native开发中的函数名、变量名都采用类似于自然语言的命名法，便于记忆。这种代码语句的基本含义基本可以直接推断和理解。
   • 积木式UI开发
     
     • 使用React Native开发时，是一种类似于搭积木的方式。不论是设计还是实现，通过React Native框架都能做到逻辑结构清晰、开发难度低、可读性高、后期维护方便。

6. 开发软硬件要求低

   使用ReactNative开发对软硬件要求低，RN开发用的软件都是可免费下载、安装使用的正版软件，部分是开源软件。

7. 使用React Native开发的代价

   • 内存消耗略大
     
     • 使用React Native 开发的程序运行所需内存比原生代码开发的程序略多。
   • 运行速度
     
     • 使用React Native开发的代码的运行速度比原生代码略慢。
   • 安装包比原生代码安装包大
     
     • 使用React Native开发的程序体积比原生代码大。无论是安装包的大小，还是安装后需要的空间都比原生代码编写的程序大。

8.使用RN开发的优点

• 1、组件化开发，复用率高，组件丰富以后，UI开发较快，前端式开发。
• 2、同时支持Android和iOS的UI界面。
• 3、可以方便的进行代码热更新。
• 4、Learn once,write anywhere，未来js可能会有更大的通用性，比如现在微信小程序的开发技术和React Native十分相似。现在还有用React Native开发mac桌面应用，开发web网页。
• 5、可以和原生页面互相调用，作为一部分嵌入到一个已有的原生app中。它是一种介于在webview和原生开发之间的解决方案，它想要实现像web一样灵活，像原生一样的性能，虽然现在还都没有达到，但是它是一种有可能接近这个目标的解决方案。

9.使用RN开发的缺点

• 1、由于还不是稳定版本，版本更新太快，大概两周会有一个新的版本。更新新 版可能会出现不兼容的问题，有时候需要手动解决。
• 2、支持的组件不全面。大部分厂商并不支持react native。一些支持的现在一般也处在不稳定版本。比如截止到rn版本0.42，js版的本地数据库组件只有realm支持，现在realm版本为3.1.0。相比较realm数据库现在是越来越稳定了。
• 3、程序的性能。现在普遍都说比原生的性能要差，但是差多少没有一个具体的衡量。直观的感觉是复杂的页面在一些配置较低的手机上会有肉眼可见卡顿的感觉。
• 4、虽然大多界面可以同时生成ios和android的，但一些涉及到底层的东西需要在ios和android单独开发，然后在js层进行调用。
• 5、关于react native的开发现在并没有一些best practice，也没有真正很有经验的人，很多只能摸索。对于小团队来说，试错成本有点高，一旦卡在一些问题上，网上解决方案很少，容易耽误了整体的进度。

---

关于RN的概念就说这么多了，我想你看完之后一定会对React Native有一个更好的认识了，接下来我会根据我自己学习RN之路的收获和遇到的困难来写更多的博客。
如果你想了解更多欢迎加入我们一起学React Native 群
来一起学习吧