React Native从入门到原理(一)

React Native 是最近非常火的一个话题，上次一个遇到了我一个从北京回来的哥们，他也是做iOS的，跟他聊天的时候他说到了这个话题，他说他们公司的同事现在都在学这个，强烈推荐我闲的时候好好学习一下，所以，我也抽空翻阅了一些关于React Native的资料，但是介绍如何利用 React Native 进行开发的文章和书籍多如牛毛，但面向入门水平并介绍它工作原理的文章却寥寥无几，所以好不容易才找了一些详细的入门原理。

作为iOS的开发者来说，由于AppStore的审核周期的限制，如何动态的去更改app成了永恒的话题，无论采取那种方式，我们的流程总是可以归结为以下三部分：从Server获取配置->解析->执行native代码。

对于大部分时间，我们都是通过HTTP请求获取到JSON格式的配置文件，利用解析出来的数据去通过OC的代码去给UILabel、UIView、UITableView等等控件进行渲染。就是利用这种方式，我们实现了在后台配置app的展示样式，但是如果业务要求频繁的增加或者删改内容的话，这样修改就会显得很麻烦，而且JSON只是一种数据交换的格式，就是我们其实是在解析文本数据，其实就是我们通过这种方式我们只是在解析字符串而已，它完全不具备运行和调试的能力。

现在随着HTML5的大热，我的身边也有很多人在学习HTML5，作为一个前端小白，我对前端的理解就是用 HTML 创建 DOM，构建整个网页的布局、结构，然后用 CSS 控制 DOM 的样式，比如字体、字号、颜色、居中等，再用 JavaScript 接受用户事件，动态的操控 DOM等也仅仅是局限在这些了解。在这3者的控制下几乎所有的页面功能都可以实现。但是如果想要动态的修改的话也是需要使用CSS和JS去先后处理。

初步认识React

随着Facebook的推出了React框架，我们可以把一组相关的 HTML 标签，也就是 app 内的 UI 控件，封装进一个组件(Component)中，在JS中使用HTML的语法，这种方法被称为JSX，它是JS的的一种语法扩展。JSX将允许我们使用HTML标签或者React标签，它们将最终被转换成为原生的JS并且创建DOM。

所以React就可以理解为其实是一套可以用简介的语法高效DOM的框架，对于所谓的“简介的语法”可以理解为暂时放下HTML和CSS，只关心如何用JS构造界面。对于高效可以理解为React独创了VirtualDOM机制，VirtualDOM是一个存在于内存中的JS对象，它是与DOM一一对应的关系，也就是说只要使用VirtualDOM就可以对DOM进行渲染。所以当界面发生变化的时候，得益于DOMDiff的算法，我们能够知道VirtualDOM的变化，从而高效的改动DOM，避免了重新绘制DOM，最后换而言之，其实React并不是前端的全部，它相当于MVC模式中的VIew部分，要想实现完整的MVC框架还需要Model和Controller的结合。在前端开发时我们可以使用Flux和Redux架构，它们并不是架构，而是一种和MVC相似的设计模式。

React Native

分别介绍完了移动端和前端的背景知识后，本文的主角——React Native 终于要登场了。

融合

前面我们介绍了移动端通过 JSON 文件传递信息的不足之处：只能传递配置信息，无法表达逻辑。从本质上讲，这是因为 JSON 毕竟只是纯文本，它缺乏像编程语言那样的运行能力。

而 React 在前端取得突破性成功以后，JavaScript 布道者们开始试图一统三端。他们利用了移动平台能够运行 JavaScript 代码的能力，并且发挥了 JavaScript 不仅仅可以传递配置信息，还可以表达逻辑信息的优点。

当痛点遇上特点，两者一拍即合，于是乎：

一个基于 JavaScript，具备动态配置能力，面向前端开发者的移动端开发框架，React Native，诞生了！

看到了么，这是一个面向前端开发者的框架。它的宗旨是让前端开发者像用 React 写网页那样，用 React Native 写移动端应用。这就是为什么 React Native 自称：

Learn once，Write anywhere!

而非很多跨平台语言，项目所说的：

Write once, Run anywhere!

React Native 希望前端开发者学习完 React 后，能够用同样的语法、工具等，分别开发安卓和 iOS 平台的应用并且不用一行原生代码。

如果用一个词概括 React Native，那就是：Native 版本的 React。