别责怪框架：我使用 AngularJS 和 ReactJS 的经验.docx

《别责怪框架：我使用 AngularJS 和 ReactJS 的经验.docx》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、别责怪框架：我使用AngularJS和ReactJS的经验在过去的几年里，网站进化成了复杂的网页应用。曾经的互联网只涉及到简单的商业信息展现，而如今，看看Facebook、Slack、Spotify以及Netflix，互联网正在改变你的社交和生活方式。随着互联网的发展，前端开发这个行业达到了全新的高度，并得到了前所未有的重视。就像大多数前端开发者那样，我们的技术栈曾经由HTML和jQuery构成。我们使用AJAX请求从后端获取数据，使用JavaScript渲染新的UI元素然后将它插入到DOM中去，用户交互通过事件绑定和回调函数来实现。不要误解我，我不反对上面那种方式，它们今天依然适合于大

2、多数Web应用。然而，当一个应用的复杂度大幅度增加，一堆问题开始出现得比预期的更频繁：你可能数据更新了，但漏掉了更新某一处展现，你通过Ajax获取和更新了内容，但没有绑定事件，还有另外一些问题，把这些全部列出来会是个很长的清单。这些问题让你的代码逐渐变得不可维护，尤其是在多人协作团队开发的项目中。这时候，你就需要使用前端框架来为你解决多人协作开发的种种问题了。1.React福音当我们的团队开始寻找一个合适的前端框架的时候，我们考虑了许多选择，最后留下两个选项—— Angular 和React。Angular是目前为止最成熟的方案：它拥有一个庞大的社区，你可以为大部分应用

3、场景找到合适的第三方模块。React也很有竞争力，它以JavaScript为中心的设计看起来很有前途，而且它性能很好。虽然它还是Beta版本，但是“由Facebook团队开发的”这一点给它的竞争力加分。我们决定给React一个机会，选择了使用它。最初使用React让人感觉棒极了，我们可以用JavaScript来做一切：展现一段HTML，通过遍历数组渲染一个列表，优雅地改变一个变量的值，然后看着它通过 props 传播到各处，更新要更新的内容到可复用组件里，然后一切就绪了，没有一坨一坨的代码，只有真正的停下来思考。React解决了我们在团队开发中编写可维护代码的诉求。2.React+Flu

4、x=♥但沿着这条路走下去，我们发现并不是一切都很美好。我们遇到的第一个大挑战就曾让我们考虑是否应该放弃React——我们陷入了回调迷宫。由于React的单向数据流性质，如果子组件需要更新父组件的状态，父组件就要传一个回调函数给它。这咋看起来没有什么大不了的，然而如果你的组件要更新root组件的状态，你就不得不将“this.props.updateCallback”沿着数据流一层一层传递下来。尽管如此，我们喜欢React，继续使用它完成我们的工作。通过努力，我们找到了 Flux，它是一种规范化单向数据流的架构思想。它由四个主要元素构成。·Store:负责存储数据和应用状态。·Action:

5、触发状态改变。·Dispatcher:管理action并将它们导向对应的store。·View:展现store中的数据，派发action-这块是React中已有的。采用Flux，我们就不用将状态保存在root组件中，然后将update回调一层层传递给它的子组件。React组件通过store直接获得数据，通过调用action来改变状态：这样简单、优雅，不会让你抓狂。Flux补充了可预测的行为和一些标准到被React框架约束的代码中。3.狂野的Angular出场…………它采用以HTML为中心的代码且并不超有效。最近，我开始参与一个Angular项目。我加入的时候这个项目已经完成了很大一部分了

6、，所以不得不用Angular，没有回头路。作为一个忠实的React开发者，我吐槽Angular。当我开始写第一行Angular代码的时候，我就真心诅咒它。这就是所谓的：如果你爱React，那你就恨Angular。我不能自欺欺人，在一开始，我写Angular代码一点也不开心。将框架定义的属性（或者，更恰当地说法是directives）写入到HTML中的做法让我感觉很不爽。我得费很大劲才能实现很简单的功能，比如改变URL的时候不重新加载controller 或者渲染基础模板。当我在表单中遇到一个由于 ngIf directive创建一个新的子域而导致的问题时，我处理起来还是很费劲。还有当我想

7、要从一个准备发送给服务器的JSON中移除一些空白字段时，我发现UI中对应的数据也被一并移除了——丫的双向绑定╮(╯▽╰)╭。还有当我想要使用 ngShow 和 ngHide 来显示一个HTML块同时隐藏另一个HTML块时，在一瞬间，两者同时显示了。我明白许多问题是我自己的问题，而我想要指出的是，Angular是不可预测的，使用它的时候会遇上各种各样的坑。当然，Angular还是善于处理很多事情的。内建的HTTP请求模块 非常棒，对p