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。