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

更多腾讯海量技术文章,请关注云加社区:https://cloud.tencent.com/developer

作者: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的实现

看一看angular正常的方式:

template.html

Hello {}

controller

var app = angular.module('app');

app.controller('testController',["$scope",function($scope){

$scope.name = 'John';

}]);

再看一看用angular式组件,使用directive

html:

组件组合

react的组件组合非常简单,使用React.createElement 方法即可。例如给上面定义的 HelloMessage 的外层添加一个div,可以这样写:

angular也很简单,直接写html即可

react对dom的封装都在React.DOM命名空间下,而coffeescipt支持解构赋值语法,所以用coffee的写法也可以媲美jsx的语法,例如:

为什么用react

虽然目前react非常之火爆,但说实话,我也不知道在现在环境中用react有什么意义。

在使用angularjs开发几个项目之后,如果需要转向react,只有以下几点可能会吸引我:

足够好的性能;

跨平台开发的统一体验。这个还得等react-android出来后才知道;

兼容其他js库,在现有项目中就可以使用。

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

性能问题,目前angularjs在移动端的性能确实不够,因为它实在太大了。这个问题是最致命的。

只能在angular的框架下开发,第三方库要兼容angular都需要做一些工作。

对于angularjs其他所谓的缺点,其实大多可以解决,只是难易程度不同,例如SEO/构建等都可以解决。

上手难易程度来说,angularjs确实比react难很多,但这和一个工具是否好用没有关系,例如正则。

网上看到大家都在鼓吹react如何如何,又有很多人抛弃了angular投向react的怀抱。说实话有点吹的太过了。

react只是让组件式开发和复用更加简单好用,外加逆天的性能,仅此而已。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171227A0GORD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券