作者：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，只有以下几点可能会吸引我：
- 足够好的性能
- 跨平台开发的统一体验。这个还得等react-android出来后才知道。
- 兼容其他js库，在现有项目中就可以使用
而对于angularjs，我认为目前angularjs已经足够好用了，除了以下几个显著的问题：
- 性能问题，目前angularjs在移动端的性能确实不够，因为它实在太大了。这个问题是最致命的。
- 只能在angular的框架下开发，第三方库要兼容angular都需要做一些工作。
对于angularjs其他所谓的缺点，其实大多可以解决，只是难易程度不同，例如SEO/构建等都可以解决。
上手难易程度来说，angularjs确实比react难很多，但这和一个工具是否好用没有关系，例如正则。
网上看到大家都在鼓吹react如何如何，又有很多人抛弃了angular投向react的怀抱。说实话有点吹的太过了。
react只是让组件式开发和复用更加简单好用，外加逆天的性能，仅此而已。
最后，到底应该用什么，看你的心情吧，我要赶去改bug了。。
相关阅读
React展示组件与容器组件（英译）
如何搭建高质量、高效率的前端工程体系--页面结构继承
腾讯云主机介绍
此文已由作者授权腾讯云技术社区发布，转载请注明文章出处，获取更多云计算技术干货，可请前往腾讯云技术社区
原文链接：https://www.qcloud.com/community/article/772822001489391693
欢迎大家关注腾讯云技术社区-博客园官方主页，我们将持续在博客园为大家推荐技术精品文章哦~