最近React Native火的不要不要的，打哪儿看都全是好评，从去年年底就开始的Native末日言论又被炒了起来。居安思危，入职以来一直做得纯Native应用，连WebView / UIWebView都很少用，感觉与目前主流的Hybrid App严重脱轨。现在正好借手头项目完结了没事做学习一下，其实官网写的文档还是比较详细的，这里只是总结和整理。
首先对比一下Native APP、Hybrid APP、 Web App、React Native：
Native APP
Native APP 指的是原生应用，使用Java/OC等开发，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。
优点：
（1）用户体验高,可针对不同平台提供不同的体验，针对平台特性去做用户体验优化。
（2）可以利用系统API及平台特性，访问手机的提供的功能（GPS，相机等）。
（3）可定制的专场动画和切换动画，与系统高度切合，可获得更快的运行速度和性能，并支持丰富的图形和动画。
（4）拥有系统级别的通知或提醒，用户留存率高。
（5）可访问本地资源，支持离线工作，节省用户的流量成本。
（6）开源框架丰富，已经形成了良好的生态环境。
缺点：
（1）开发成本高，上手需要一定的平台基础，需要针对不同平台需要不同的技术背景进行开发，并且开发相对来说比较繁琐。
（2）维护成本高，需要兼容历史版本，保证历史版本的正常使用。用户需要下载升级，虽然现在热修复热更新比较热，但是我认为还达不到正常更新版本的地步。
（3）分发成本高，分发到不同的应用商店，需要进行不同的配置打包。
Web App
我理解的Web App说白了就是一套适配各种屏幕的Html5页面，使用Html5/JavaScript/CSS开发，由前端开发人员编写，只需要一个浏览器就能轻松访问。
优点：
（1）开发成本低，一个web前端开发人员不需要学习很多新技术即可进行开发。
（2）开发一次基本可以适配所有平台，适用范围广，再次体现了成本低。
（3）更新快，用户看到的总是最新版本，无需下载，随开随用。
缺点：
（1）用户体验相对来说比较差，Dom解析耗费了大量的时间（传送门），交互图形和动画效果较差，尤其是弱网情况下基本不能忍，而且对系统资源的损耗远远超过Native应用。
（2）用户存留率低，只有打开才有通知推送。
（3）访问手机文件和手机功能的能力相对来说比较薄弱。
（4）虽然Html5可以离线使用，但是连接网络的时候把用户想看的不想看的页面都给下载下来，个人认为对流量要求比较高，不符合大众使用。
Hybrid App
Hybrid App又叫混合应用，是一种介于Native App、Web App之间的App，结合了两种App模式的优点，一般来说是使用Native来处理用户和系统的交互，Web来展示内容。通过原生系统的WebView / UIWebView或者自定义的WebView来实现Web页面的嵌入，现在大部分应用都是采用的这种模式。
优点：
（1）可以利用系统API及平台特性，访问手机的提供的功能（GPS，相机等）。
（2）用户体验适中,可定制的专场动画和切换动画，与系统高度切合，可获得更快的运行速度和性能，并支持丰富的图形和动画。
（3）拥有系统级别的通知或提醒，用户留存率高。
（4）开发成本适中，Web页面替代了部分Native页面，并且可以跨平台使用，节省了开发时间。
缺点：
（1）维护成本高，需要兼容历史版本，保证历史版本的正常使用。
（2）分发成本高，分发到不同的应用商店，需要进行不同的配置打包。
（3）嵌入的Web页面在弱网情况下体验比较差。
React Native
React Native (简称RN)是Facebook于2015年四月开源的跨平台移动应用开发框架，是Facebook早先开源的Web UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。该框架使用Javascript，类似于HTML的JSX，以及CSS来开发移动应用UI，因此熟悉Web开发的人只需很少的学习成本就可以转入移动应用开发。
RN运行时包含一个原生的主线程和一个JS线程，JS线程执行JS代码，负责界面布局和业务逻辑处理，原生线程负责界面渲染和原生组件的执行。RN里面尽量使用原生组件，避免重复造轮子。这样的好处，一是可以利用现有的大量的原生组件，降低入门门槛；二是可以达到跟原生应用一样的性能；三是通过JS封装过后的组件，可以支持跨平台。
JS在RN里面的作用类似于Python这样的支持调用原生C库的脚本语言，都是起着“胶水”的作用。复杂计算和底层功能都通过调用原生接口来完成，流程控制和业务逻辑则在“胶水”语言里完成。这样既提高了开发效率，又兼顾了性能。
React Native是 Facebook 开源的框架，可以直接用JavaScript 开发原生的APP。React Native和Hybrid App很像，很多人也喜欢吧React Native和Hybrid App混为一谈，但其实并不是。React Native采用JavaScript桥接加Native桥接两个方式合并起来，然后加上增加对比差异化算法增量渲染，而且渲染都是Native渲染，虽然使用JavaScript 编写，但是后台是渲染成Native来使用的，性能虽然比纯原生差一点，但是还是远远比Html5的性能要快很多。
优点：
（1）Learn once,write anywhere。注意，不是Java的Write once, run anywhere！
（2）因为是Native渲染，所以性能相对来说比较高。
（3）可以利用系统API及平台特性，访问手机的提供的功能（GPS，相机等）。
（4）拥有系统级别的通知或提醒，用户留存率高。
缺点：
（1）由于还不是稳定版本，版本更新太快。并且更新新版可能会出现不兼容的问题或者额外的bug需要开发者自己去处理。
（2）学习成本高。要学习Javascript，还需要涉及到IOS，Android开发相关知识。(Boss：这个工作特么的要分给前端做呢还是给客户端做呢？！）
（3）支持的组件不全面。大部分厂商并不支持React Native。
（4）截止到现在还是个新技术，生态刚刚开始生成，但是还没有到Native生态那么丰富的地步，很多需求还得自己动手从头写起。
题外：
一般要学习一门新技术的时候都会查技术的前景和发展潜力，和相关主流技术对比。不论从已有的生态和发展趋势，还是公司的技术要求上来看，我觉得目前学习React Native是最好的选择。过程在下面罗列出来（我都没用过，暂时都是收集的观点，意见保留到我都试用之后）：
- Dcloud ： 可能是目前国人开发的最易用的、最优秀的跨平台框架，并且有自己的IDE，HBuilder和MUI搭配虽然我没用过，但是周围朋友公司在用，赞不绝口。据说有人查过最终的页面结构，依旧是基于WebView的渲染，所以性能暂时还是比不过React Native的。具体详情见传送门。
- LuaView ： 阿里的开源SDK，采用的是Lua脚本语言，作者团队更新比较慢，资料也比较少，不推荐。
- Weex(Vue-Native) ： 同样是阿里的开源作品，目测是React Native最有力的竞争者，易用性比React Native好，并且性能上各有千秋，甚至说还要更优秀一点，唯一的缺点是开源时间比较晚，资料还不够丰富，没有形成强大的生态环境，不过按照目前的形势看，一切只是时间问题。和React Native的Learn once,write anywhere 理念不同的是，Weex 比较倾向于和Java一样的 Write once, run anywhere。 具体详情见传送门1，传送门2。
安装环境：
目前支持的开发平台是Windows,Mac和Linux。因为家里电脑用的是Win7，所以暂时只总结Windows和Android下的开发环境搭建。其他平台请看官网这里。
搭建React Native平台环境需要安装Python2和Node.js。我们可以直接去官网下载配置环境，不过官方推荐我们用Chocolatey来进行环境搭建。
Chocolatey is a package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer.
1.一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。我们在命令行下输入如下命令（自备梯子）：
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\\\\chocolatey\\\\bin
安装比较慢，而且没有进度条，忍忍。
2.安装Node.js 和 Python2。注意，目前已知Node 7.1版本在windows上无法正常工作，请注意避开这个版本！
choco install nodejs.install
choco install python2
3.npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题。而Yarn是Facebook提供的替代npm的工具(Yarn vs npm: 功能上的差异)，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务（自备梯子）。
npm install -g yarn react-native-cli
如果没有合适的梯子，那就先设置下npm镜像（如果不能识别npm命令，你可能需要重新开一个命令行窗口）
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.我们需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入以下来查看你当前安装的JDK版本(记得配置JAVA_HOME)。
javac -version
如果版本不合要求，则可以到 官网上下载，或是使用包管理器来安装。
choco install jdk8
5.安装Android开发环境，基本功了，网上大把的教程，这里就不准备在介绍了。值得一提的是React Native对AndroidStudio的最低支持是2.0，并且确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。
6.进行到现在基本已经完成环境搭建了，为了提升Java编译速度，我还开启了Gradle Daemon
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
自此我们的React Native环境搭建已经完成，接下来可以新建一个项目来测试环境有没有搭建成功。
创建一个Hello RN
让我们从Hello RN开始我们的React Native旅程：
react-native init HelloRN
创建完成.png
漫长的等待结束后我们可以看到，如果项目创建完成，会自动执行编译和部署到手机上，需要在AndroidStudio打开并且模拟器或者真机的adb连接成功情况下才能查看。如果不会自动编译部署就需要手动进行如下命令进行打开服务：
react-native start
默认服务端口号是8081，如果想要修改端口号，有两种方式：
- 开启服务的时候直接指定端口号
react-native start --port XXXX
- 修改默认端口配置文件，配置文件在项目根目录下的node_modules\react-native\local-cli\server\server.js里面，_server的default里面进行端口号修改。
如果忘了开AndroidStudio或者没有连接模拟器 / 真机，没关系，我们可以手动进行编译部署：在AndroidStudio打开并且模拟器或者真机的adb连接成功情况下打开并编译我们的Hello RN:
cd HelloRN
react-native run-android
如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。
修改项目
如果你已经成功运行了项目，我们可以简单尝试玩一下：
- 使用你喜欢的文本编辑器打开index.android.js并随便改上几行
- 按两下R键，或是用Menu键打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。
- 在终端下运行以下命令可以看到你的应用的日志。
adb logcat *:S ReactNative:V ReactNativeJS:V
开发IDE配置
虽然我们已经成功跑起来了Hello RN但是开发没有IDE怎么行，我选择的是AndroidStudio + WebStorm组合。如果遇到gradle很久的问题，请直接移步问题三。
AndroidStudio
直接Import项目根目录下的android即可。
AndroidStudio导入项目.png
WebStorm
WebStorm需要进行一点点配置：
1.首先导入项目，直接Open整个根目录：
WebStorm导入项目.png
2.WebStorm提示你需要切换JSX，直接切换Switch
切换JSX.png
3.进行Edit Configurations，配置npm
配置npm.png
4.运行服务，然后通过WebStrom命令窗口部署即可
IDE部署.png
IDE环境装载结束，可以开始无限火力了。
网友评论