前端开发框架简介:angular和react

作者：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，只有以下几点可能会吸引我：

1. 足够好的性能
2. 跨平台开发的统一体验。这个还得等react-android出来后才知道。
3. 兼容其他js库，在现有项目中就可以使用

而对于angularjs，我认为目前angularjs已经足够好用了，除了以下几个显著的问题：

1. 性能问题，目前angularjs在移动端的性能确实不够，因为它实在太大了。这个问题是最致命的。
2. 只能在angular的框架下开发，第三方库要兼容angular都需要做一些工作。

对于angularjs其他所谓的缺点，其实大多可以解决，只是难易程度不同，例如SEO/构建等都可以解决。
上手难易程度来说，angularjs确实比react难很多，但这和一个工具是否好用没有关系，例如正则。

网上看到大家都在鼓吹react如何如何，又有很多人抛弃了angular投向react的怀抱。说实话有点吹的太过了。
react只是让组件式开发和复用更加简单好用，外加逆天的性能，仅此而已。

最后，到底应该用什么，看你的心情吧，我要赶去改bug了。。

原文链接：http://ivweb.io/topic/556ae97673956de01fad07ed

相关阅读

React展示组件与容器组件（英译）

如何搭建高质量、高效率的前端工程体系--页面结构继承

腾讯云主机介绍

---

此文已由作者授权腾讯云技术社区发布，转载请注明文章出处，获取更多云计算技术干货，可请前往腾讯云技术社区

原文链接：https://www.qcloud.com/community/article/772822001489391693

欢迎大家关注腾讯云技术社区-博客园官方主页，我们将持续在博客园为大家推荐技术精品文章哦~