React Native移动开发实战 - (EPUB全文下载)
文件大小:0.25 mb。
文件格式:epub 格式。
书籍内容:
React Native移动开发实战
第1章 React Native入门
第2章 React Native环境搭建与调试
第3章 React Native开发基础
第4章 常用组件介绍
第5章 常用API介绍
第6章 组件封装
第7章 网络与通信
第8章 混合开发高级篇
第9章 热更新与打包部署
第10章 基于LBS的天气预报应用开发
第11章 O2O移动团购应用
欢迎来到异步社区!
第1章 React Native入门
1.1 React Native基本知识
React Native基于React框架而设计,因此,了解React有助于我们更好地理解React Native。
1.1.1 React简介
React是由Facebook推出的前端开发框架,其本身作为MVC模式中的View层来构建UI,也可以以插件的形式应用到Web应用程序的非UI部分构建中,轻松实现与其他JS框架的整合。同时,React通过对虚拟DOM的操作来控制真实的DOM,从而得到页面的局部更新,提高了GPU渲染的性能,而React提出的模块化开发思路也大大提高了代码的可维护性。
React的官方地址是https://github.com/facebook/react。截至2017年4月,React获得了超过62K的star和11K的fork,这说明React得到了技术人员的普遍支持,正是由于这些原因,React.js和Vue.js、Angular.js成为了当今最流行的三大前端框架。
讲到React,就不得不提到组件(Component)的概念,它是React最基础的部分,其功能相当于AngularJS里面的Directive,或是其他JS框架里面的Widgets或Modules。Component可以认为是由HTML、CSS、JavaScript和一些内部数据组合而成的模块,当然Component也可以由很多其他的Component组建而成。不同的Component既可以用纯JavaScript定义,也可以用特有的JavaScript语法JSX创建而成。采用React进行项目开发,能够获得以下优势。
虚拟DOM(Virtual DOM)
传统的Web应用开发,一般都是通过直接操作真实DOM来进行更新操作的,如图1-1所示,但对DOM进行操作通常是比较昂贵的。而React为了尽可能减少对真实DOM的操作,采用了一种强大的方式来更新DOM,代替直接的DOM操作,这就是Virtual DOM,一个轻量级的虚拟DOM。
图1-1 传统的Web应用结构图
虚拟DOM其实是React抽象出一个对象,通过这个Virtual DOM可以更新真实的DOM,由这个Virtual DOM管理真实DOM的更新,如图1-2所示。简单来说,React在每次需要渲染时,会先比较当前DOM内容和待渲染内容的差异,然后再决定如何最优地更新DOM,这个过程被称为reconciliation。
图1-2 React Web应用结构图
除了性能方面的考虑,React引入虚拟DOM更重要的意义在于提供了一种新的开发方式来开发服务端应用、Web应用和手机端应用,如图1-3所示。
图1-3 虚拟DOM结构图
Components组件
虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想。所谓组件,即自己封装的具有独立功能的UI部件。React推荐以组件的方式去构成视图,并建议将功能相对独立的模块抽象为组件。例如,Facebook的instagram.com网站都采用React来开发,整个页面就是一个大的组件。
对于React而言,界面被分成不同的组件,每个组件都相对独立。在React开发中,整个界面可以看成是由大小组件构成,每个组件实现自己的逻辑部分即可,彼此独立,如图1-4所示。
采用组件化开发,往往具有以下特点:
可组合(Composeable):一个组件易于和其他组件一起使用,或者嵌套在另一个组件内部。如果在一个组件内部创建了另一个组件,那么父组件拥有它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件。
可重用(Reusable):每个组件都可以独立出来,被使用在其他相似的UI场景中。
可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护。
可测试(Testable):每个组件都是独立的,那么对于各个组件分开测试显然要比整个界面容易得多。
图1-4 Components组件示意图
数据流(Data Flow)
React采用单向的数据流,即从父节点到子节点的传递,因此更加灵活便捷,也提高了代码的可控性。React单向数据流可以总结为以下流程:Action→Dispatcher→Stroe→View,如图1-5所示。
图1-5 React单向数据流流程图
JSX语法
JSX是React的核心组成部分,React使用JSX来替代常规的JavaScript。它使用XML标记的方式去直接声明界面,目的是通过各种不同的编译器将这些标记编译成标准的JS语言。使用JSX语法后,可以让组件的结构和组件之间的关系看上去更加清晰并且执行效率更高。
1.1.2 React Native简介
React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物,目前支持iOS和Android两大平台。
React Native可以基于目前大热的开源JavaScript库ReactJS来开发iOS和Android移动应用,因为往往只需要开发一套代码就可以满足iOS和Android,正如Facebook说的“Learn once, write anywhere”(仅需学习一次,编写任何平台),由于基于Web技术,React Natie开发起来可以像在浏览器那样随改即所见。
Reac ............
以上为书籍内容预览,如需阅读全文内容请下载EPUB源文件,祝您阅读愉快。
书云 Open E-Library » React Native移动开发实战 - (EPUB全文下载)