JavaScript（React Native、Node.js等）移动、服务端通吃的全栈语言

作者：李宁老师

 东北大学计算机专业硕士。曾任沈阳东软股份项目经理。51CTO学院签约讲师。从事软件研究和开发超过20年。长久以来一直从事Java、Android、iOS、C++、Swift、Objective-C以及跨平台游戏引擎（Cocos2d-x、Unity3D等）的开发和技术指导工作。对国内外相关领域的技术、理论和实践有很深的理解和研究。

主要著作包括《Cocos2d-x实战游戏开发指南》（即将出版）、《Swift权威指南》、《Android深度探索 卷1和卷2》、《Android开发权威指南（第二版）》、《Android开发完全讲义（第三版）》、《Android高新之路面试宝典》、《Android深度探索（卷1）：HAL与驱动开发》、《Android应用开发实战（第二版）》、《Java Web开发技术大全：JSP+Servlet+Struts+Hibernate+Spring》等畅销书。

不管是互联网公司，或是传统的软件公司，以及非IT企业，大多都需要开发各种类型的程序，包括移动App（主要是Android和iOS）、Web程序、服务端程序等。这些程序使用的开发技术都不尽相同，如Android使用Java开发，iOS使用Objective-C或Swift开发、Web程序页面使用JavaScript、HTML5、CSS等技术，而服务端的选择就更多了，如Java EE、PHP、Python、Ruby、Node.js等。理论上，每一类的程序需要不同的开发小组完成，如Android开发小组、iOS开发小组，服务端开发小组等。这对于大公司没什么问题，反正钱多。不过对于大多数创业公司来说，可能是一笔不小的负担。

为了解决这个问题，现在出现了很多跨平台技术，包括基于HTML5的混合开发、C++跨平台解决方案等。不过这些也仅仅是跨平台。顶多解决了Android和iOS之间代码最大限度共享的问题（仍然有一部分无法共享的代码需要单独编写），而服务端仍然要我们使用其他技术开发，如Java EE。不过自从有了Node.js以后，JavaScript就成为了服务端的开发语言，而且有了React.js，系统会将JSX代码（在后面介绍）自动转换Web页面的DOM元素。这样，JavaScript+JSX，连同Web+服务端一起搞定了，不过好像还少了点什么，对，移动端（Android和iOS），这就是本文要讲的主题：React Native，下面会详细介绍一下React Native，以及用于设计UI的JSX。

React Native是Facebook 在 React.js Conf 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript，UI使用JSX（一种语法类似于XML的UI描述语言）。

那么ReactNative和React.js有什么区别呢？

任何一种跨平台框架都有两部分：UI和逻辑。对于这两种技术来说，UI都使用的是JSX，而逻辑都是用了JavaScript。

React Native和React.js的主要区别还是JSX。不管是React Native，还是React.js，在UI上都有一种技术：虚拟DOM（Virtual DOM）

那么什么是VirtualDOM呢？

其实JSX只是一种语法糖。Web通过DOM管理Element。而DOM的效率是很低的，为了提高DOM的效率，React.js提供了VirtualDOM，这项技术的工作是完全在内存中完成的，而且是增量修改DOM树，所以效率非常高。

对于Web来说，实际渲染时，仍然需要DOM，所以在最终渲染是，VirtualDOM仍然要转换成实际的DOM。而对于Android和iOS，就没有DOM的概念的，UI完全是本地控件实现的，如Android中的TextView、EditText等。所以React Native就应运而生。如果说React.js在运行时将Virtual DOM映射成了DOM，那么React Native就是在运行时将Virtual DOM映射成Android和iOS的本地控件。

从这一点可以看出，React.js用于Web开发，而ReactNative用于开发Android和iOS App，他们都将UI抽象成了Virtual DOM，只是在实际运行时，前者将Virtual DOM映射成了DOM，后者将Virtual DOM映射成了Android和iOS的本地控件。

由于ReactNative的UI仍然使用Android和iOS的本地控件，所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript，但由于JavaScript是即时编译的，也就是第一次运行时会将JavaScript代码编译成二进制，所以JavaScript的运行效率比较高。因此，React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多，因为这些技术直接用HTML5进行渲染，而HTML5会大量使用DOM技术，DOM在PC端的Web中也不算快，在移动端就更慢了。

总结：基于ReactNative的App在运行效率上接近Native App，而且还拥有混合开发模式的两个优点：热更新（无需重新编译上传App即可更新，而且还不用通过App Store审核）和跨平台（降低了学习成本，使用同样的技术开发Android和iOS App）。

OK，现在已经了解了React Native，是不是打算学一下呢！移动、Web和服务端使用同一种技术即可解决，尽管都需要进行开发，但技术是通用的，也就是说只要招JavaScript程序员，就可以同时解决移动、Web和服务端的问题，使用一个开发小组即可解决所有问题，也无需再招聘Java、OC、Java EE、PHP程序员了，这样会给创业公司节省了大量的开支。

完全征服React Native视频课程

李宁老师的其他视频课程

极客文化微信公众号（geekculture）（用于发布李宁老师书的源代码，以及和视频课程有关的信息）