React.js是Facebook推出的用户即时反应界面库

15-01-29 banq
                   

React是一个建立用户前端界面的 JavaScript库包,很多人使用React作为MVC的V,其实远非这么简单,React代表的Flux模式已经可以取代MVC,见:前端Flux架构简介

React使得JavaScript UI代码能够在服务器端(e.g. Node.js) 和客户端同时执行,为了提高相比Angular.js等框架更快的启动时间,首先是在服务器端初始化一个页面,等在浏览器渲染完成后全部由React掌管,实现单页应用效果(single-page application).

为了降低生成DOM的开销, React是更新一个虚拟DOM(virtual DOM),然后再通过差别算法决定虚拟DOM和实际DOM的最小差别进行必要的实际操作更新,虚拟的virtual DOM差别树形结构的修改远远快于实际DOM的修改, 特别是使用今天的有效增量Javascript引擎(increasingly efficient JavaScript engines) ,比如使用JIT即时编译的WebKit的Nitro。

React通过服务器端通过Node.js渲染虚拟DOM(virtual DOM )能够获得高性能详细可见:使用ReactJS + Node实现服务器端响应渲染

React使用的是one-way reactive数据流,而非AngularJS的two-way数据绑定。这让其变得更加可推导reason about。参考:让编程变得更可推导三种放心

React此外提供强大的组件和Mixin API,能够创建可重用的视图,分享通用功能和模式,比如A/B测试可以针对不同的设计,能够以不同的单独React子组件实现视图,这些子组件可以由共同的父组件渲染, 取决于测试中的定义。不同的逻辑行为可以抽象到React mixin中,虽然也可以使用传统的继承模式实现,但是当增加新功能时,会导致频繁修改父类接口,从而影响已有的代码。React的组合模式是实现代码可维护性和可扩展性的理想方式。

项目网站:A JavaScript library for building user interfaces

使用React可以建立如同Android IOS等原生应用的效果,比如随着手机晃动移动图片等,Youtube视频:React.js Conf 2015 Keynote - Introducing React Native

下面代码是在浏览器输出“Hello John" :

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);
<p>

[该贴被banq于2015-01-29 16:37修改过]

[该贴被banq于2015-01-29 17:16修改过]

                   

1