关于angular和react

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了。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的诗和远方

20180826_ARTS_week09

第一种方法,把数字转成字符串,再变成数组,倒转,然后再变回字符串。 很明显,这个方法效率不高。

641
来自专栏程序员的知识天地

web前端学习:React是什么,为什么要使用它?

React是Facebook内部的一个JavaScript类库,已于1年开源,可用于创建Web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动...

702
来自专栏星流全栈

还在纠结 Flux 或 Relay,或许 Redux 更适合你

1796
来自专栏闰土大叔

太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。

971
来自专栏小古哥的博客园

前端技术的发展与演变

近年来,前端技术的发展迅速,但因为前端知识面庞大,在实际学习当中往往无法理清其中的脉络。下面从各种库、框架、插件的层面上,对前端知识点做一些简单的梳理。从软件工...

3426
来自专栏技术翻译

2018年Web开发人员应该学习的12个框架

它可以帮助你获得更好的工作,并将你的职业生涯提升到新的水平,如果遇到无聊的工作,例如启动和停止服务器,设置一些cron作业,以及回复维护传统的旧电子邮件应用,使...

1604
来自专栏FreeBuf

Quantum – NSA最强大的互联网攻击工具

作者 小禾才露尖尖角54 wired最近刊登了一篇详细描述有关Quantum的好文,披露了一些有关NSA Quantum系统的细节,其攻击能力令人印象深刻。 ...

17110
来自专栏SDNLAB

SDN网络与传统网络对比

SDN相比传统网络具有很多优点,比如控制与转发分离,这种思想打破了传统设备供应商的绑定,提高了新业务的部署速度,可以从整个网络层面对流量进行优化等等。在SDN网...

39511
来自专栏WeTest质量开放平台团队的专栏

Qzone高性能HTTPS实践

自从去年QQ空间移动端页面开始切换到HTTPS之后,页面性能遇到了比较大的挑战,HTTPS对页面访问速度带来了比较大的影响,所以我们通过实践总结了一些能够提升H...

862
来自专栏青枫的专栏

JSP+EL+JSTL学习小结

PageContext:pageConext 存放的数据仅在当前页面有效。开发时使用较少。当前页面存放数据用表单标签中的 <input type="hidden...

521

扫码关注云+社区