作者：vienwu

react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下：

just the ui

把react只当作一个ui组件就好，等同于传统mvc中的view。

virtual dom

react在编程模型和传统dom之间添加了一层，称之为虚拟dom。好处非常多，性能更好，可以在node环境下完成渲染（解决seo问题），可以更好的用于开发native apps。

data flow

反应式的单向数据绑定，比传统数据绑定更简单，简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。

什么是angularjs

angularjs是google推出的一个前端js框架，面世已有几年时间，非常成熟，目前已经有非常多的第三方模块，基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多，这里就不做过多介绍。

reactjs和angularjs

reactjs是非常纯粹的组件式开发，所有的页面元素均由各大小组件组合而成。再插上虚拟dom的翅膀，实现了一处代码多平台执行的效果，关键是这货性能还不错。但是呢，除了组件以外，这货其他什么功能也没有，你需要重新造出所有的缺失的轮子或者选择第三方的轮子。

angularjs则是一个完整的框架，意味着不需要太多的工作，就可以使用于大部分的业务场景。
简单好用的module和依赖注入系统，controller中定义的数据和事件，service实现不同组件之间共享数据，filter处理筛选数据，forms支持表单和复杂的表单验证，简单的动画模块animations，强大的directive实现指令和指令的嵌套，可以很轻松的实现reactjs的组件及组件组合功能。ui组件有bootstrap for angular，路由有ui-router，还有promise模块$q，还有原生的$resource模块直接支持标准的restful接口，集成的单元测试，等等，哇哇，功能好多的样子，又到但是的环节，话说很多初学者会被很多angularjs的名词折磨的晕头转向。。。

如果要拿reactjs来开发应用，你还需要做很多额外的工作。而如果使用angularjs的话，就可以直接开始工作了。

两者之间其实无法直接拿来比较，毕竟react只是view的解决方案，而angularjs是包含mv*的完整框架。

抛开跨平台和性能因素，就功能而言，angularjs已经包含了reactjs的功能，只需要一个自定义directive加controller就可以轻松实现组件效果。

如果是一个大型项目，使用angularjs无疑更可靠。强大的功能带来一定的学习成本，但这一切都是值得的。
而使用react的话，你首先需要考虑一个问题，数据怎么管理？用哪个mvc库？接下来还有一堆问题等着你。

如果只是一个小型项目，那就看心情吧。

再单独说下关于数据的问题，react还搞出了一个叫做flux的概念。简单看了一下react的flux模型，这不就是个观察者模式嘛。而angular至少支持了三种数据共享方式，包括service，事件，rootScope直接添加一个object，可以分别适应各种不同的场景。

我们来看看react和angular实现组件的方式有什么不一样。。

组件实现

很多人包括我刚看到jsx时会想一个问题，我靠，这货是什么玩意？

js已经有了coffeescript、typescript等，以后还有es6，难道还要学一个这玩意？

还好，除了jsx外，我们也可以直接用js甚至coffee来编写，虽然麻烦了点。

你只要记住，在react的世界，jsx的语法比js写起来更方便更容易理解就好了，具体用什么取决于你自己。

注1：为了便于没有jsx基础的jser理解，本文所有react示例均使用编译后的js代码。 注2：用coffee写更爽。

第一个组件，hello系列，先看react的实现

var HelloMessage = React.createClass({displayName: "HelloMessage", render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render( React.createElement(HelloMessage, {name: "John"}), document.getElementById('container') );

看一看angular正常的方式：

template.html

<div>Hello {{name}} </div>

controller

var app = angular.module('app'); app.controller('testController',["$scope",function($scope){ $scope.name = 'John'; }]);

再看一看用angular式组件，使用directive

var app = angular.module('app'); app.directive('myComponent',function(){ return { link:function(scope,element,attrs){ var name = attrs.name; element.text('Hello ' + name); } } });

html:

<myComponent name="John"></myComponent> 组件组合

react的组件组合非常简单，使用React.createElement方法即可。
例如给上面定义的HelloMessage的外层添加一个div，可以这样写：

var HelloMessageWithDiv = React.createClass({ displayName:'HelloMessageWithDiv', render:function(){ return React.createElement( 'div', null, React.createElement(HelloMessage, {name: "John"}) ); } });

angular也很简单，直接写html即可

<div><myComponent name="John"></myComponent></div>

react对dom的封装都在React.DOM命名空间下，而coffeescipt支持解构赋值语法，所以用coffee的写法也可以媲美jsx的语法，例如：

{div,h1,h2,h3,h4,input,span} = React.DOM React.render( div null,'head.', div null,'nav', ul null, li null,'li1' li null,'li2' div null,'container', h1 null,'title' div null,'content' h2 null,'h2' ,document.getElementById 'container' ) 为什么用react

虽然目前react非常之火爆，但说实话，我也不知道在现在环境中用react有什么意义。
在使用angularjs开发几个项目之后，如果需要转向react，只有以下几点可能会吸引我：