React介绍

React Native移动跨平台开发

一、移动平台开发分类

• Native App

       优点：性能优越、功能强大
       缺点：版本维护和更新体验不太好

• Web App

      优点：开发成本低、升级简单

      缺点：与原生App相比，性能和体验还是相差比较大

• Hybrid App

      介于Native与Web之间。

二、React介绍

       在Web应用开发的早期，构建Web应用的唯一方案就是向服务器发送请求，然后服务端响应请求并返回一个完整的界面。从开发角度上讲，这种方法非常简单，但是用户体验非常不好，用户的许多行为都要想服务器发送请求，等待服务器响应。因此，开发者开发各种类库，使用javascript在浏览器中渲染界面。

       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