使用 AngularJS 和 ReactJS 的经验

1. React 福音

当我们的团队开始寻找一个合适的前端框架的时候,我们考虑了许多选择,最后留下两个选项 —— Angular 和 React

Angular 是目前为止最成熟的方案:它拥有一个庞大的社区,你可以为大部分应用场景找到合适的第三方模块。

React 也很有竞争力,它以 JavaScript 为中心的设计看起来很有前途,而且它性能很好。虽然它还是 Beta 版本,但是 “由Facebook团队开发的” 这一点给它的竞争力加分。

我们决定给 React 一个机会,选择了使用它。

最初使用 React 让人感觉棒极了,我们可以用 JavaScript 来做一切:展现一段 HTML,通过遍历数组渲染一个列表,优雅地改变一个变量的值,然后看着它通过 props 传播到各处,更新要更新的内容到可复用组件里,然后一切就绪了,没有一坨一坨的代码,只有真正的停下来思考。React 解决了我们在团队开发中编写可维护代码的诉求。

2. React + Flux = ♥

但沿着这条路走下去,我们发现并不是一切都很美好。我们遇到的第一个大挑战就曾让我们考虑是否应该放弃 React —— 我们陷入了回调迷宫。

由于 React 的单向数据流性质,如果子组件需要更新父组件的状态,父组件就要传一个回调函数给它。这咋看起来没有什么大不了的,然而如果你的组件要更新 root 组件的状态,你就不得不将 “this.props.updateCallback” 沿着数据流一层一层传递下来。

尽管如此,我们喜欢 React,继续使用它完成我们的工作。通过努力,我们找到了 Flux,它是一种规范化单向数据流的架构思想。它由四个主要元素构成。

  • Store: 负责存储数据和应用状态。
  • Action: 触发状态改变。
  • Dispatcher: 管理 action 并将它们导向对应的 store。
  • View: 展现 store 中的数据,派发 action - 这块是 React 中已有的。

采用 Flux,我们就不用将状态保存在 root 组件中,然后将 update 回调一层层传递给它的子组件。React 组件通过 store 直接获得数据,通过调用 action 来改变状态:这样简单、优雅,不会让你抓狂。Flux 补充了可预测的行为和一些标准到被 React 框架约束的代码中。

3. 狂野的 Angular 出场……

……它采用以 HTML 为中心的代码且并不超有效

最近,我开始参与一个 Angular 项目。我加入的时候这个项目已经完成了很大一部分了,所以不得不用 Angular,没有回头路。作为一个忠实的 React 开发者,我吐槽 Angular。当我开始写第一行 Angular 代码的时候,我就真心诅咒它。这就是所谓的:如果你爱 React,那你就恨 Angular

我不能自欺欺人,在一开始,我写 Angular 代码一点也不开心。将框架定义的属性(或者,更恰当地说法是 directives)写入到 HTML 中的做法让我感觉很不爽。我得费很大劲才能实现很简单的功能,比如改变 URL 的时候不重新加载 controller 或者渲染基础模板。

当我在表单中遇到一个由于 ngIf directive 创建一个新的子域而导致的问题时,我处理起来还是很费劲。还有当我想要从一个准备发送给服务器的 JSON 中移除一些空白字段时,我发现 UI 中对应的数据也被一并移除了 —— 丫的双向绑定 ╮(╯▽╰)╭。还有当我想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时,在一瞬间,两者同时显示了。我明白许多问题是我自己的问题,而我想要指出的是,Angular是不可预测的,使用它的时候会遇上各种各样的坑。

当然,Angular 还是善于处理很多事情的。内建的 HTTP 请求模块 非常棒,对 promise 的支持也很好。另一个我无法吐槽的好东西是:内建的表单控制器,它为 input 字段提供了默认的格式化、解析和校验,而且还提供了一个很好的插件用来展示错误信息。

使用 Angular 也能让开发团队与页面制作团队协同工作变得更简单。在我们团队,有专门的页面重构工程师负责写 HTML 和 CSS,Angular 能让我们的工作无缝对接:重构工程师负责 HTML 和一些额外的标签,我负责处理逻辑。如果我们使用的是 React,那么至少让重构工程师写组件会是一个挑战,要么得让他学会写基本的 JSX,要么我就只能自己将他写的 HTML 复制粘贴到 JSX 中。

还记得前面提到的 URL 替换和模板渲染问题吗?其实没关系,人们通常使用第三方的路由库(ui-router)它们比标准的 (ngRoute)要好用。最后,Angular 也没有我之前认为的那样糟糕。之前的大多数抱怨要么是因为我习惯了 React 思维,要么是我还不够专业。

4. 总结: AngularJS 与 ReactJS

React 使用原生 JavaScript 函数让开发者可以创建一个有固定生命周期的、单向数据流的可复用组件。React 与 Flux 架构(或者受 Flux 启发而产生的其他架构,比如 Redux)相结合,能让团队长期维护一个项目变得更加容易,使用它不用担心解决一个 bug 会引入更多新 bug。但是,如果你的团队有专门写 HTML 和 CSS 的人,React 会带来额外的学习成本,因为它改变了传统的开发流程。而且 React 的效果还非常依赖你选择的组成你的应用的模块。

另一方面,Angular 专注于设计简单的双向数据绑定,当你改变 controller scope 中的内容,变化将会被自动地同步到UI(效果如同魔法般)。它自认为节省了配置的时间,开发者不用像传统开发模式那样考虑用各种设计模式组织代码然后从上百种可选的方案中选出一个核心模块。使用双向绑定为开发带来了便利,然而它也容易在长期维护的过程中由于修改部分代码而产生不可预期的 bug,尤其是那些在过去的几个月中没有再动过的代码。

那么,我从头开始创建 app 的首选方案是什么呢?

从长远而言,我个人倾向于选择 React,使用 Redux 架构,使用 Axios 支持 promise-ready 的 HTTP 请求,以及使用 react-router 处理路由。

时间: 2024-11-05 12:36:07

使用 AngularJS 和 ReactJS 的经验的相关文章

AngularJS和ReactJS对比

Angular的特点: 优势: AngularJS是一套完整的框架,angular有自带的数据绑定.渲染.angularUI库, $directive,$service, $q(defer),$route, $http,$cookie……,等等一系列工具,基本上只要你在做web开发用过的东西,它都有一个.但是这些东西react自身都没有. Angularjs的架构清晰,分工明确,扩展性良好,model,view,controller谁在什么时候做什么事情说的很清楚,angular能够让程序员真正

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

angularjs的部分总结

就在这个星期,我们学习了一个神奇的框架叫:"Angular js",它的神奇之处不是它的功能有多强,甚至它的功能还是很简陋的,但是它的那种思想是非常牛逼的;他完全抛弃了我们现在所常用的.先取得对象,然后再对这个对象去绑定或者是处理.它完全的放弃了dom操作,化繁为简.但是我们所说的万物有好处,就会有不理想的地方,比如说它的适应性就不是很好,需要大量dom操作的时候,就不是它的用武之地了,比如说游戏,而且由于与我们常规的做法相违背,所以对于初学者来说不是很友好,有的人说用着很爽,而有的人

AngularJS移动开发中的坑汇总

使用AngualrJs开发移动App已经快半年了,逐渐积累了很多AngularJS的问题,特别是对于用惯了Jquery的开发者,转到AngularJS还是需要克服很多问题的.不像Jquery那样侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. 下面的内容假设你已经了解前端 MVC 概念,并对 AngularJS 有了一定经验,初学者读起来可能比较艰深晦涩.本文的总结会涉及部分在移动设备上特有的问题. DOM操作的问题 避免使用 jQuery 来操作 DOM,包括增加元素节点,移

AngularJs学习笔记0——前言

距离上次写博客有很长时间了,这段时间中也一直想坚持写博客,但是迟迟未动,一方面是因为刚换工作并适应新的环境导致工作比较忙碌,一直没有抽出时间来,其实说白了就是给自己的懒惰找借口,但是本人在园子里也有一段时间了,也一直坚持关注园子里的大神们的文章,感触颇多.最近也一直计划坚持写博客,并把工作中遇到问题及学习到的技能给大家分享,对给大家有那么一些帮助.最近也计划写一些最近工作中用到的技术做一个专题分享给大家,也对自己的一个总结吧. 前端时间因为工作中项目需要学习了一下AngularJs,我也网上查询

分享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它火,而是因它的模块化.双向数据绑定.注入.指令等都是非常适合架构较复杂的前端应用,而且文档是相当的全,碰到问题基本上可以在网上都找到答案.所以前端基本思路就以angularjs为主.代码模块化,通过requir

ReactJS 与 Domcom 比较 -- domcom 好在哪里?

在John Resig设计的jQuery独霸前端javascript多年之后,Google推出的重量级AngularJS给前端开发带来巨大的观念变化,给人耳目一新之感,同时也推动前端的观念.技术和框架领域进入快速迭代,百花齐放的局面.长江后浪推前浪,AngularJS还在浪涛之巅,facebook推出的ReactJS又异军突起,再次给前端Web应用开发的思路带来巨大转变,颠覆了很多刚刚成为时尚的观念.然而ReactJS依然存在很大的问题,而Domcom做到了去繁就简,成为一个非常简洁优雅的框架,

AngularJS开发经验(转)

AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 一.AngularJS 中的精美特性 双向绑定 上面的例子已经说明了,我们可以像 PHP Smarty 模板一样在 HTML 中写表达式,用 {{ 和 }} 包起来.在 AngularJS 里,View 和 Model 是在 Controller 里面绑定的,所以无论你在 Vi

[开源] angularjs + Asp.net 前后端分离解决方案

本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849.html 一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它