前端开发框架简介: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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

模拟制作网易云音乐(AudioContext)

记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩。由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一...

3675
来自专栏无原型不设计

简单易用的交互设计工具:摩客串串Chinco

今天给大家介绍一款简单实用的原型交互演示设计工具—摩客串串Chinco。 ? 为什么要介绍这款产品呢? Chinco是继国产原型设计软件Mockplus之...

2957
来自专栏星流全栈

2016 JavaScript 技术栈展望

1554
来自专栏java一日一条

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础...

582
来自专栏前沿技墅

漫谈前端性能本质 突破React应用瓶颈

侯策:硕士毕业于法国国立高等电信学校。曾任职于BePATIENT集团,负责互联网+医疗平台的研发。曾任职于法国能源和苏伊士集团,参与欧洲天然气运输和费用系统的研...

1101
来自专栏IMWeb前端团队

关于angular和react

react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下: just the ui 把react只当作一个ui组件就好,等同于传统m...

2246
来自专栏互联网杂技

react+redux+webpack教程1

经历了EXT、YUI时代,又经历了Angular时代,我们正在步入React时代。 前端开发框架凭借JS极其灵活强大的特性模样越来越“怪异”,正是这怪异让我们对...

3325
来自专栏向治洪

React Native之携程Moles框架

因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套...

1918
来自专栏原创

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计...

4478
来自专栏申龙斌的程序人生

零基础学编程015:画些有趣的图案

从《零基础学编程014:小海龟做画》中我们学会了基本的做图命令,只需要用上循环语句,就可以画出比较复杂的图案来,比如: from turtle import *...

3199

扫码关注云+社区