为什么我要从 Angular 迁移到 React 和 Redux ?

AngularJS Redux   2018-03-13 15:55:13 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

我对 Angular 又爱又恨已经有一段时间了。这很有趣,因为我正在学习,而且在做一个简单的应用程序时,我被卡住了好几周。

我注意到,即使在制作最简单的特性的过程中,我甚至不确定它是否值得使用 Angular 。我彻底掌握了基本的基本原理,这足以使小的特性发挥作用。

但是,它没有成功。更糟糕的是,我甚至根本不使用 Javascript 。它更像是一种完全不同的语言。

我喜欢 Typescript  ,但不知怎的,我在使用它时变得烦躁不安,因为我花了很多时间来掌握 Javascript 的细节。而且感觉我还在做一些后端工作(依赖注入、服务等)。奇怪的是,所有的事情都让人感到熟悉和沮丧。

然后有一天,我最终放弃使用 Angular 并寻找诸如 React  和  Vue  等其他选择。我在 2015 年 React 发布时有尝试过 React 。我记得它当时处于测试阶段,有很多人都在谈论它。 我不明白它的全部流程,比如 “ state ” 。

但在 2017 年第四季度左右,我尝试重温并观看与 React 和 Redux 相关的课程。 我很好奇大家为什么对这个库感到大惊小怪,它在 2017 年左右疯狂流行,其所谓的数据不变性也在大肆宣传。

我喜欢 AngularJS( Angular 的第一个版本),以至于我喜欢它的“怪癖”并对它进行了很多研究。 但是,当我转移到 Angular 2+ 并投入了时间去研究时发现,我觉得有些东西不对,并且出于某种原因,它可能无法提供 React 中最简单的功能。 

快速使用:最后我很高兴我做到了。 一旦你了解  React  的基本原理,实际上很容易实现这些基本功能。

我几个月来一直在我的新项目中使用 React ,并且我可以真正地说我没有后悔尝试使用 React 生态系统。 从那以后,我再也不用依靠 Angular 了。

所以,如果你可能会问:是什么让我从 Angula 转到 React ? 仅仅只是灵活性吗?

小争论:不要拿苹果和橘子比较

我的意思是在这两个生态系统中我都没有受到任何损失,可能我们只是说,在 React 中整合新功能比 Angular 更容易,因为 React 是一个 ,Angular 是一个 框架 。 大多数人都忽略了两者之间显著存在的巨大差异。

当你使用一个库时,它只是你应用程序的一部分。所以显然,学习曲线也很小,你甚至可以混合使用其他一些库。

框架对你开发影响是很大的。而且你应该遵守他们的标准使用方式(例如做 http 请求,组件绑定,事件绑定等)。简而言之,在使用 Angular 的情况下,你需要以“ angular ”的方式来做事情。因为你使用的是框架,所以你必须遵循它。 

这与只负责视图部分的 React 情况不同。除此之外,你可以自行发现可能想要用于执行 http 请求以及订阅密钥绑定的内容。你可能想要使用 Redux 或  Flux 来进行数据存储和状态管理。你有很大的自由空间。

那么,下面是我现在使用 React 的原因:

它是一个库。因此,你可以附加任何你想要的 JavaScript 库作为附加组件

这很明显,因为 React 只是另一个 JavaScript 库,而不是框架。如前所述,在 React 中,你可以轻松地附加任何想要的库。只要你知道你在做什么,它并不关心 JavaScript 中的堆栈环境。 React 的理念围绕“乐高积木”的概念展开。这是你可以在库中获得的一个重大优势,也是你可以拥有的最强大的好处之一。我们都知道技术来来去去基本都是那几种。那么为什么你仍然需要把大部分时间都花在学习一个框架中呢?

这就是为什么我切换到 React 的原因:只使用我需要的东西。我可能不需要全面的框架,因为我不会以其他的方式使用框架的大部分功能。关键是,不管你的应用是过度设计还是架构良好,你仍然无法躲避在过程中引入错误的现实。既然如此,为什么还要过度设计?

当我尝试创建一个涉及附加全局事件处理程序的功能时,在 Angular 中,为了实现这个功能而需要做大量工作!

我搜索了几次 StackOverflow ,答案都是一样的。为了完成这项工作,需要经历一系列的挑战,实际上就是需要 大量开发工作 。 但我通过使用 Event Emitters 只花了一天时间就解决了这个问题。也就是说,对于一些简单的事情,它仍然需要大量的工作。

我并不是说 Angular 执行得不够好。 但是,可能我仍然需要投入大量时间才能完成简单的工作。

React 通过使用另一个名为 mousetrap  的 js 库来实现这一点,以实际绑定整个应用中的全局键值。 现在我可以使用我在 Vanilla JavaScript 中学到的东西了。

P.S:React 具有极大的灵活性的同时也具备良好的职责分工。

状态管理更加灵活

如果没有像 Flux 和 Redux 这样的库补充到 React 生态系统中,我可以说, React 可能与 Angular 依赖注入和服务模式是同等的。我不太喜欢使用这些模式,特别是在做一些前端的事情时。也许我只是不习惯使用它,因为在后端使用它更有意义,但在前端更少。

在我开始使用 React 和 Redux 一段时间后,我注意到,管理状态和在组件的不同部分分配那个状态是多么容易和轻松。这很神奇,因为它更强调每个 React 和 Redux 结合在一起的“状态”。

那么为什么它这么重要?因为它使你的沟通在你的组件的所有部分看起来毫不费力。你只需要发送一个动作,创建一个减速机,连接并知道它是什么 “state” ,瞧! 这个状态将反映在所有使用它的组件中,只要你修改了该状态。只有当你使用 Flux 和 Redux 时,这才是正确的。

一个理想的用例是当两个或多个组件依赖相同的数据或状态时,只需通过简单地将组件连接到 Redux 来轻松地检索它们。例如,我的仪表盘上的组件都需要同样的数据,并很好的在模态框中显示,以让我更容易把它们连接起来。

为实现这个目标,你需要做以下的事情:

  • 在你的 React App 中加入 Redux

  • 创建一个 由 Dispatchers Actions Reducers  组成的 Redux store

  • 把你的组件连接到 Redux Container

  • 在你的组件内部使用 Application State

当然,在这样做时,你也必须小心,因为随着应用的增长,它可能会变得更加混乱。在所有的灵活性中总是有一个权衡,无论是编程语言还是库。 Abramov 在他的博客中进一步表示: 你可能不需要 Redux

现在,让我们来看看 Angular 是如何做的:

带有 Service 的组件作为中心连接一个组件与另一个组件进行通信。

全局状态方法也可以用 Angular 2+ 的方式进行。你可能会说,它与 React 工作方式完全不同,因为它使用 服务模式 作为 Angular 核心模式,主要是为了迎合 API ,使单元测试更容易。

为了让组件彼此通信,你需要执行以下操作:

  1. 创建包含事件发射器的服务,以使每个组件的通信成为可能。

  2. 创建可以响应用户在全局组件中操作的事件发射器。

  3. 为将使用全局事件的每个组件注入服务。

  4. 为将使用它们的每个组件创建事件发射器,并在订阅服务中创建事件。

  5. 确保事件发射器将被取消订阅,以使事件只触发一次。

你仍然完成需要冗长的设置,以便开始在组件彼此之间通信。

 

来自:https://www.oschina.net/translate/why-im-switching-from-angular-to-react-and-redux-in-2018

 

扩展阅读

React库+GraphQL服务器+Relay架构联合作战(上)
Angular2 中那些我看不懂的地方
Redux服务端渲染及webpack优化
Redux服务端渲染及webpack优化
为什么我不再使用MVC框架

为您推荐

会jQuery,该如何用AngularJS编程思想?
使用 AngularJS 开发一个大规模的单页应用(SPA)
Angular2 中那些我看不懂的地方
react+reflux入门教程
[译]Angular2新人常犯的5个错误

更多

AngularJS
Redux
React
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多