React Native移动跨平台开发
一、移动平台开发分类
Native App
缺点:版本维护和更新体验不太好
Web App
优点:开发成本低、升级简单
缺点:与原生App相比,性能和体验还是相差比较大
Hybrid App
介于Native与Web之间。
二、React介绍
React起源于facebook公司,起初用于Instagram网站开发,React是一个用于构建用户界面的javascript类库,不是一个MVC框架,提出了一种新的开发模式与理念,它强调的是“用户界面”。
三、React特点
- 作为UI
React可以作为MVC当中的View层进行使用,并且在已有项目中很容易使用React开发新功能。
- 虚拟DOM
虚拟DOM是React最重要的特性,实现了优化视图的渲染和刷新,之前没有ajax技术的时候,Web界面从服务端整体渲染出html输出到浏览器上进行渲染,同样的,用户的一个改变界面的动作就会使得整个界面刷新。直到有了ajas技术,使得界面可以局部刷新,带来了高效和分离让Web开发者惊叹不已。但随之而来的问题时,复杂的用户界面交互及及展现需要通过大量的DOM操作来完成,这让界面的性能及开发的性能遇到了瓶颈,如何高性能的进行大量的DOM操作通常是衡量一个前端开发人员技能的重要指标。
时至今日,谈到web界面性能优化,减少DOM元素、减少reflow和repaint、开发过程中尽量减少DOM的查询等操作是大家耳熟能详的,而界面任何的UI变化都是通过整体刷新来完成的,而React之所以快,是因为它不直接操作DOM,而是引进虚拟DOM的实现来解决这个问题。
基于React进行开发时所有的DOM构造都是通过虚拟DOM来进行,每当数据变化时,React都会重新构建一个完整的虚拟DOM树,虚拟DOM树是内存数据,React通过自己实现的Dom Diff算法,将当前虚拟DOM树和上一次的DOM树进行对比,得到两个DOM结果的差异,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。达到最小化重绘,避免不必要的DOM重绘。解决了这两个公认的前端性能瓶颈,实现高效的DOM渲染。
- 组件化
虚拟DOM(virtual - dom)不仅带来了高效简单的UI开发逻辑,同时也带来了组件化的开发思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成。将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式组成大组件。最终完成UI组件的构建。
如果说MVC的思想如果让你做到视图-数据-控制器的分离,那么组件式思考方式则是带来了UI功能模块的分离。对于React而言,开发者从功能的角度出发,将不同的UI划分成组件,每个组件都独立封装,在React中,你按照界面模块,自然划分的方式来组织和划分你的代码,这个界面应是一个通过小组件构成的大组件,每个组件只关心自己独立的逻辑,彼此独立。React组件用该有一下特征:可组合、可重用、可维护。
- 数据流
React实现了单向的数据流,相对于传统的数据绑定,React更加灵活、便捷。
- React与React Native的关系
React用于Web应用开发,React Native采用React的方式进行移动应用的开发。
React Native采用React的语法,用于进行javascript跨终端应用开发,即拥有原生Native的交互体验,又能够保留React的自由的开发效率,使用灵活的css和html布局,使得React语法构建组件。可以同时运行在ios和Android平台上。
React的中文网站:http://www.css88.com/react/index.html