React简介

 2016年01月19日    766     声明


React是Facebook内部的一个JavaScript类库中,可用于创建Web用户交互界面。它引入一种新的DOM处理方式,你只需要声名式的定义各个时间点的用户界面,React就能在指定时间点,以最小的DOM修改来更新整个用户界面。


  1. React来源
  2. React特点
  3. React与APP
  4. ReactAngularJS


1. React来源

在传统的Web应用中,构建Web应用需要客户端向服务器发送请求,然后服务器中响应请求并返回一个完整的页面。由于HTTP的无状态性,会造成用户在页在上所积累的状态丢失。

构建Web页面时,为了提高页面代码的复用率,会将构建视图(View)的代码组件化。一些Web相关开发语言都提供了相关的框架,以提供开发效率及复用代码,和更好的管理应用程序的形为。

但是,这些方式都很难拥有的良好用户体验。因此,人们开发一些类库,使用JavaScript在浏览器端渲染应用。然而,随着项目的增大,应用的复杂度也在增长。

React来源于Facebook的XHP框架。React产生的目的就是要把XHP服务端渲染页面的工作流带到客户端应用中。


2. React特点

2.1 只是一个视图(View)

React是一个视图,其主要功能就是渲染页面。不同于AngularJSReactAjax、路由及数据的存储和组织方式等,它只是MVC框架中的V(View)。


2.2 一个“状态机”

React也被认为是一个“状态机”,它帮助人们管理随着时间变化而变化的状态,并以此管理管理页面的变化。React只关心两件事:

  • 更新DOM
  • 响应事件

React以渲染函数为基础,这些函数会读取当前的状态,并将其转化为目标页面上的一个虚拟表现。当感知到页面状态有变化,React就会运行这些渲染函数,计算生成一个新的虚拟表现,并将其转换为必要的DOM更新。


2.3 一个高效的渲染系统

React以一个虚拟的DOM实现了一个强大的渲染系统,React对DOM的处理方式是只更新不读取。这种处理方式有效的解决了DOM改变时,JavaScript读取和更新DOM带来的性能问题。

React使用了非常高效的渲染算法,它会计算虚拟页面当前版本和新版本之间的差异,基于这些差异对DOM进行最小化重绘

最小化重绘避免了不必要的DOM更新,还简化了应用的维护成本。当用户页面的状态改变时,我们只需要通知React状态改变,React就会自动处理这些改变并重新绘制页面。


3. React与APP

3.1 React Native

使用一种语言在所有平台上编写代码,这应该是所有程序员梦寐以求的事。React让这成为可能,2015年3月Facebook发布了React Native

React Native基于React可以编写Native APP,也就是说使用React Native可以开发iOS或Android原生App。

React Native的核心理念是:Learn Once,Write AnyWhere。使用React Native意味着,只要编写一套UI就能同时应用在浏览器、IOS、Android,而且编写出来的APP是原生的。不仅如此React Native也使等待版本的发布的漫长,只需要在服务端修改代码,就能实时的更新到客户端。


3.2 React Native原理

React Native继承了ReactJSX语法及差异化界面更新算法,以声明的方式来描述UI结构。React Native中抛弃了HTML及WebView,它使用React操作系统中原生的UI组件代替DOM进行沉渲染。如:使用<View>代替<div>、使用<Image>代替<img>

React Native运行了一个后台线程,该线程用于运行JavaScript渲染页面和与系统间的状态通信。也正是由于这一机制,使得React Native可以编写出原生的APP,而非基于HTML5的Web APP。


3.3 React Native与原生APP

相比原生APP,React Native有如下好处:

  • React Native让开发中没有了前端工程师、后端工程师、iOS/Android工程师的概念,一组开发人员可以完成Web、iOS APP、Android APP开发,在人员效率上有极大的提升。

  • React Native提高了代码复用率,一套界面可以用于Web、iOS或Android。

  • React Native能够做到热更新,只需要服务端更代码,APP或Web就能实时响应更新。

虽然React Native可以满足大部分的业务场景,但相比原生APP其还有一些不足:

  • React Native的差异化View渲染可以满足大多数的页面渲染需求,但对于精细化需求或动画控制无法满足。

  • React Native诞生时间较短,其UI组件和模块相比原生系统还显得不足。

  • React Native的学习成本不小学习原生APP技术。


4. ReactAngularJS

做客户端技术,ReactAngularJS有些相似之处。React其背后的支持者是Facebook,而AngularJS背后的支持者是Google。二者在设计思想上有所区别,很难说它们之间的优劣。

  • AngularJS是客户端的MVC框架,其最大的特色是其双向绑定机制,AngularJS有完整的页面渲染、数据绑定、事件处理、路由、Ajax等管理机制。

    React只用于页面渲然,也就是说它只处理了V(View)的部分,其最大的特色就是基于状态的DOM更新。

  • AngularJS发展时间更长,生态和功能更为完善,但其相对来说也更为臃肿,这在某些时候也导致了加载速度的变慢。

    React更小巧和独立,其基于组件的界面开发方式及虚拟DOM的开发思想,使其处理页面渲染的速度非常快。由于它不是一个完整的框架,在开发效率和现有的资源上不及AngularJS

  • AngularJS是一套完整的MVC框架,它可以在客户端处理一些类似服务端的业务处理,需要做一些大型应用系统时AngularJS非常合适,当这一切的前提是需要团队开发人员对AngularJS的处理机制及MVC架构有足够的了解。

    React不适合于独立使用,其做为一个独立的视图渲染系统,其在UI组件开发效率、页面渲染速度及跨平台性上有较大的优势。

AngularJS团队意识到了AngularJS种种缺点,在之后AngularJS 2.0中以一种推翻重做的姿态做了较大幅度的改进。React的应用目前还较少,这也反映了其不完善性,而React Native的发布,也显示了React在跨平台及移动应用领域的野心。

目前来看,ReactAngularJS很难分出孰优孰劣,按自己的项目需要选择即可。例如,你所在的团队需要“一把锤子搞定一切”,没有或不需要专业的iOS、Android开发人员,而又想要编写出高效的原生APP或高效的页面渲染,React无疑是最佳先择。而要在页面中处理复杂的业务逻辑,且又需要较高的生产效率时,那么应该选择AngularJS