前端开发框架简介: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 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

关于流程图设计,你需要Get的几点必备知识

流程图(Flow Chart)这个概念对很多人来说并不陌生,但如果让你定义或者举例说明什么是产品流程图,恐怕还是有难度的。或许诸如“用户体验”、“交互设计”、...

2815
来自专栏IMWeb前端团队

sheral——一个方便定制及扩展的UI组件库

sheral是什么 简单来说,sheral是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等...

2156
来自专栏葡萄城控件技术团队

MultiRow中文版技术白皮书

引言 Microsoft .NET是一项比较成熟的技术开发框架,很多的商业应用都是基于.NET开发的,在这些商业应用中,作为数据展示和录入的表格控件,是不可或缺...

1945
来自专栏HaHack

基于 Cocos 的高性能跨平台开发方案

2018 年 6 月 GMTC 全球移动技术大会在北京举办,大会旨在通过聚焦前沿技术与实践经验帮助参会者了解移动开发、前端领域最新的技术趋势与最佳实践。

1513
来自专栏IMWeb前端团队

关于angular和react

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

2176
来自专栏QQ空间开发团队的专栏

ReactNative For Android 项目实战总结

Android Qzone 6.1版本在情侣空间涉水React Native,以动态插件方式将情侣空间进行React Natived的改造。在情侣空间基础上,A...

2K0
来自专栏前端知识分享

第143天:渐进增强和优雅降级之间的不同

第一个例子的写法叫做渐进增强(progressive enhancement),第二个例子的写法叫做优雅降级(graceful degradation)。(关于...

762
来自专栏企鹅号快讯

Stimulus:让web应用在移动端达到原生体验

【IT168 资讯】很多开发者一年来通过Basecamp写了很多JavaScript,但是并没有用它来创建现代意义上的“JavaScript应用程序”。所有的应...

2548
来自专栏达摩兵的技术空间

触摸界面的设计

触摸界面主要是指移动设备,区分于pc。触摸界面按照屏幕大小主要是分为三大类,最小的用户最多的是手机,显示尺寸从3.5-7寸,再大一点是7-10寸,最大的为10-...

633
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|UI自动化——adbui的使用及实现

1405

扫码关注云+社区