关于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 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

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

react 是 facebook 推出一个用来构建用户界面的 js 库,angularjs 是 google 推出的一个前端js框架,本文对两者进行了一些对比。

2.9K1
来自专栏walterlv - 吕毅的博客

当我们使用 MVVM 模式时,我们究竟在每一层里做些什么?

2017-11-29 17:29

561
来自专栏技术分享

.NET应用架构设计—重新认识分层架构(现代企业级应用分层架构核心设计要素)

阅读目录: 1.背景介绍 2.简要回顾下传统三层架构 3.企业级应用分层架构(现代分层架构的基本演变过程) 3.1.服务层中应用契约式设计来解决动态条件不...

2107
来自专栏京东技术

多级缓存设计详解 | 给数据库减负,刻不容缓!

物流研发部架构师,GIS技术部负责人,2012年加入京东,多年一线团队大促备战经验,负责物流研发一些部门的架构工作,专注于低延迟系统设计与海量数据处理。曾负责青...

1225
来自专栏IT技术精选文摘

客服系统微服务架构的演化

微服务要求 ? ? ? ? 服务协作 ? 服务治理 ? 服务治理 ? ? ? 1 怀疑第三方 坚持一条信念:“所有第三方服务都不可靠”,不管第三方什么天花乱坠...

3415
来自专栏Cloud Native - 产品级敏捷

微服务架构 (九): 分布式微服务下的数据一致性

2016.8.21, 深圳, Ken Fang 微服务都拥有各自的数据库且微服务都是部署在一分布式的环境下的。所以, 微服务间要维持彼此间数据库中的数据的一致性...

2085
来自专栏GuZhenYin

一步步学习EF Core(3.EF Core2.0路线图)

前言 这几天一直在研究EF Core的官方文档,暂时没有发现什么比较新的和EF6.x差距比较大的东西. 不过我倒是发现了EF Core的路线图更新了,下面我们就...

1999
来自专栏Albert陈凯

2018-04-16 Java面试通关要点汇总集2018年最新 Java面试通关要点汇总集

2018年最新 Java面试通关要点汇总集 基础篇 基本功 面向对象的特征 final, finally, finalize 的区别 int 和 Integ...

2636
来自专栏Java帮帮-微信公众号-技术文章全总结

02.工厂模式/抽象工厂模式

工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在...

2853
来自专栏数据和云

表分区“拖出”的性能Error

作者介绍: 曾令军,云和恩墨技术专家,2009年开始接触ORACLE数据库,8年数据库运维经验。思维敏捷,擅长于数据库开发、解决棘手的数据库故障和性能问题。服务...

3087

扫码关注云+社区