angular和react

提示：不是因为炒作

我与Angular建立了这种爱恨交加的关系已有相当一段时间了。 这很有趣，因为当我陷入困境时，我正在学习并且正在制作一个简单的应用程序。 数周。

我注意到，即使在使最简单的功能正常工作的过程中，似乎也很难做到这一点，我现在不确定是否值得使用Angular。 我已经完全掌握了基本的基础知识，这足以使这些小功能起作用。

但是，没有，它没有解决。 更糟糕的是，我什至根本没有使用JavaScript。 完全像是另一种语言。

我喜欢打字稿 ，但是由于某种原因我花了很多时间来掌握普通javascript的来龙去脉，所以我对使用它感到不安。 确实感觉像我还在做一些后端工作（依赖项注入，服务等）。 奇怪的是，一切都变得熟悉而同样令人沮丧。

终于有一天，我放弃了使用Angular并寻找其他替代方案，例如React和Vue 。 我在2015年中期左右发布时尝试过React。 我记得它仍处于测试阶段，很多人都在谈论它。 我不了解包括“状态”在内的整个流程。

但是在2017年第4季度左右，我试图重新访问它，并观看了与React和Redux相关的课程。 我很好奇它在2017年左右疯狂流行的库上有什么大惊小怪的，还有对所谓的不变性的大肆宣传。

我喜欢AngularJS（Angular的第一个版本），以至于我喜欢它的怪癖并对其进行了很多研究。 但是当我转移到Angular 2+并对其进行一些初期投资时，我感到有些不对劲，并且由于某种原因，它无法提供React中可能的最简单的功能。

快进：最后我很高兴自己做到了。 一旦了解了React的基本原理，提供基本功能实际上就非常容易。

我已经在新项目中使用React几个月了，我可以说我对尝试他们的生态系统毫不后悔。 从那时起，我再也没有依赖过Angular了。

因此，如果您可能会问：尽管过去我曾经喜欢Angular，但是什么使我改变了React？ 为什么不只是灵活性呢？

一点争议：不要将苹果与桔子相提并论

我对这两个生态系统都没有害处，可能只是说在React中集成新功能比Angular容易，因为React是一个库，而Angular是一个Framework。 显然，大多数人忽略了两者之间的巨大差异。

使用库时 ，它只是应用程序的一部分。 因此，显然学习曲线也很小，您可以将其他一些您想使用的库混合在一起。

另一方面， 框架很大。 并且您必须遵守其标准的处理方式（例如执行http请求，组件绑定，事件绑定等）。 简而言之，您必须尽一切努力。 对于Angular，您需要以“ Angular”方式进行操作。 一切！ 弯曲自己的方式有多么棘手，因为您使用的是框架，因此必须遵循它。

这与React仅负责View部分的情况不同。 除此之外，您可以自己发现自己可能要用来执行http请求和订阅键绑定。 您可能想将Redux或Flux用于数据存储和状态管理。 你有自由。

事不宜迟，以下是我现在使用React的原因：

这是一个图书馆。 因此，您可以将您选择的任何javascript库附加为附件

这很明显，因为React只是另一个JavaScript库，而不是框架。 如前所述，在React中，您可以轻松地附加您选择的任何库。 只要您知道自己在做什么，它就不会在意javascript中的堆栈。 React的哲学围绕“乐高积木”的概念。 这是您可以在图书馆中获得的一大优势，或者更好的是您可以拥有的最强大的优势之一。 我们都知道技术来来往往。 那么，当您仍然需要学习很多内容时，为什么要将大部分时间都花在一个框架上？

这正是我切换到React的目的：仅使用我需要的内容。 我可能不需要完整的框架，因为我不会以任何一种方式使用框架的大多数功能。 事实是，无论您的应用程序多么过分设计或架构合理，您仍然无法逃避最终会引入一些错误的现实。 所以知道，为什么要过度设计呢？

当时在Angular中，当我尝试创建涉及附加全局事件处理程序的功能时，我惊讶地发现，要使其正常工作，我需要做多少工作！

我搜索了StackOverflow两次，答案是相同的。 为了使这项工作奏效，您仍然必须经历一系列挑战。 挑战实际上意味着很多工作 。 最终，我通过使用事件发射器解决了问题，该事件发射器广播多个组件中的事件并将其注入每个控制器中 。 ew！ 如此简单的事情需要做很多工作。

我并不是说它实施得不好。 但是可能我仍然需要投入大量时间才能使一个简单的应用程序正常工作。

React通过使用另一个称为mousetrap的 js库毫不费力地做到了这一点，从而在我的整个应用程序中实际绑定了全局键。 现在，我可以使用在香草JavaScript中学到的东西。

PS具有极大的灵活性，肩负着巨大的责任。

状态管理更灵活

真理的单一来源

如果没有像Flux和Redux这样的库来补充React的生态系统，我可以说React可以与Angular并存， 减去依赖注入和服务模式 。 我不喜欢使用这些模式，特别是在做一些前端工作时。 也许我不习惯使用它，因为在后端使用它更有意义，而在前端使用它则更少。

当我启动React，Redux并玩了一段时间之后，我刚刚注意到管理状态并将该状态分布在组件的不同部分感觉很容易，几乎毫不费力。 这是惊人的，因为它更加强调“状态” ，这是每个React和Redux结合在一起的核心。

现在为什么这很重要？ 因为它使您在组件的所有部分中的通信看起来都很轻松。 您只需要调度一个动作，创建一个reducer，连接并知道它是什么“状态” ，瞧！ 只要您修改状态，该状态就会反映在使用该状态的所有组件中。 但是，仅当您使用Flux和Redux时才如此。

如果您以前没有使用过React并想知道什么是“状态” ，最好将状态描述为组件数据在给定时间点的外观。 类似于“模型”在Angular等其他任何库中的工作方式。 它只是保存您的数据 。

借助Redux， 应用程序状态使每个React组件都可以全局轻松地访问每个状态。 这个想法是，当您分派一个动作并修改该特定应用程序状态时，它将反映在使用该动作的那些组件上。 Redux在后台为您实现了这一神奇功能，因此您不必担心组件不会被更新。

一个理想的用例是，当两个或两个以上组件依赖相同的数据或状态时，只需通过Redux连接组件即可轻松检索它们。 例如，对于我的仪表板上的两个组件，我都需要相同的数据，并且还以模态形式显示它们，因此，将它们连接起来更容易。

为此，您需要执行以下操作：

• 将Redux整合到您的React App中
• 创建一个由Dispatchers ， Actions ， Reducers组成的Redux Store
• 将您的组件连接到Redux容器
• 在组件中使用该应用程序状态

当然，您在执行此操作时也必须小心，因为随着应用程序的增长，它可能会变得更加混乱。 无论是编程语言还是库，在某种灵活性上总会有一个权衡。 丹·阿布拉莫夫（Dan Abramov）在他的博客文章中进一步表达了这一点：“ 您可能不需要Redux” 。

现在，让我们看看Angular如何做到这一点：

全局状态方法也可以用Angular 2+方式完成。 您可以说它与React的方式还是完全不同的，因为它使用Service Pattern作为Angular的核心模式主要是为了满足API和简化单元测试。

为了使您的组件能够相互通信，您需要执行以下操作：

• 创建一个包含事件发射器的服务，以使每个组件中的通信成为可能。
• 创建事件响应器，以全局响应组件中的用户操作
• 将服务注入将使用全局事件的每个组件
• 为将使用它们的每个组件创建事件发射器，并订阅服务中创建的事件
• 确保事件发射器将被取消订阅，以便仅一次触发事件

您仍然需要这种冗长的设置，才可以开始相互反映您的组件数据。

JSX语法与javascript很好地融合在一起

我相信这是未来javascript应该采用的方式。 几乎感觉像是javascript的自然演变，或者javascript应该很好地融合在一起。

那时，当我在玩Angular时，由于某种原因，感觉就像Angular和javascript之间存在阻力。 可能是因为打字稿的要求。

但是使用React，它可以与javascript完美融合，因为您的组件直接位于javascript内 。 因此，不需要双向数据绑定。

起初，我有点喜欢这样的想法，即您的组件在html中很好地分开，并且另一个单独的js文件可以用它在html中进行一些数据绑定。

但是我绝对没想到这一幕即将到来，我会爱上JSX语法与javascript很好地融合在一起的。 在JSX中向组件添加逻辑很容易。 与Angular相比，这将我的开发时间缩短了约4倍。

更快的学习曲线

只要有困难的原因（例如，改进的可维护性和工作流程），我对我学习某个框架或库所需的学习曲线有多困难或需要多长时间都没有问题，那么我们将其视为挑战。

我承认我很难进入React生态系统（尤其是在2015年初），但是一旦我能够理解它的功能意图以及其背后的设计理念，我的生产率就提高了十倍。 我不必在这里和那里进行类型检查。

当然，不进行类型检查有很多缺点。 但是它们大多数都不重要。 如果您更喜欢使用TypeScript，则React是开放的。

现代Web开发具有挑战性，我们开发Web应用程序的方式现在与以往不同

这就是我跳到React生态系统的原因之一。 考虑到开发Web应用程序的领域已经发生改变，我需要使用学习曲线较短且易于维护的库或框架。 这样，我仍然有更多时间学习网络开发的其他部分，并完善自己作为开发人员的技能。

我想强调这一点，因为与以往相比，现在在现代开发应用程序既明显不同又令人生畏。 大多数情况下，由于javascript社区的进步和进步（并且可能要归功于NodeJS的存在），您的Web应用程序现在可以成为独立的javascript应用程序。

如今，Web中还发生了许多事情，例如构建同构Web应用程序，通用Web应用程序，本机Web应用程序，例如使用React Native。 无论哪种方式，它都变得越来越具有挑战性。

现在，这对从事Web开发已有相当一段时间的新手和开发人员都构成了严峻的挑战，因为您需要了解如何捆绑javascript应用程序，使用grunt或gulp，browserify，webpack等。

这告诉我们有关Angular和React生态系统的哪些信息？ 简单。 学习曲线和时间。

如果我们只是刚开始了解现代Web开发，那么学习Angular会花费您的时间来真正开始构建真实的应用程序。 因此，您将仅一年就被严格地限制学习Angular。 您可以说，借助CLI，现在可以更轻松地设置现代框架和库，但是仍然缺少有关Web应用程序实际工作原理的内部机制。 它使您完全不必学习它们。

这对于现代Web开发来说是个坏消息，特别是如果您想成为一名全职开发人员。 您几乎没有时间研究现代Web应用程序其他设置的来龙去脉。

由于您可以使用React学习和构建Web应用程序的速度如此之快，因此您还可以更有效地学习构建现代Web应用程序的其他部分。 因此，我现在在短时间内就对ES6功能，Babel和Webpack有了一个很好的了解。 对我来说，这是一个节省时间的时间。 总体而言，我现在能够学习现代Web开发的工作原理（甚至从头开始学习NodeJS）。

您可以轻松地重用组件

使用React，您的组件是纯函数，您可以简单地将其导入并应用到其他React组件中。

尽管我讨厌Angular，但是与您的组件进行通信似乎非常困难。 我必须先熟悉很多术语，才能在其他组件中重用Angular组件。 这是令人失望和耗时的。

而且，通常，您仍然需要添加服务以使它们彼此通信（尽管如果您像我一样来自后端开发，这也不是问题）。 在大多数情况下，您仍然需要手动添加订户，以使两个或更多组件相互通信。 现在，这是我们大多数时间遇到的问题。

当我搜索Stack Overflow时，很多人在每个组件的全局广播相同数据时遇到问题。

说实话，与新的Angular一起工作真是恐怖。

当我阅读允许我重用一个组件的解决方案时，我不禁摇头问自己：这个解决方案值得吗？ 为什么这首先会变得过于复杂？

广泛的社区支持

想象一下一个几乎没有社区支持的javascript库或框架。 在某些情况下，您可能会陷入无法解决的技术实施中，或者必须自己做一些肮脏的工作。 通常，这对您和应用程序所依赖的业务而言都是非常昂贵的。

最近，React具有比Angular和AngularJS更大的社区支持。 VueJS可能正在赶上来。 您可以分辨出当今哪些人得到了人们的广泛支持。

不过，还是将您在Google趋势或Github中找到的这些数字或统计信息一目了然。 您不能仅仅通过查看数字来证明它是最好的框架或库。 您必须先自己尝试一下，才能判断出最好的。

那么，选择哪一个呢？

为应用选择javascript框架或库时，需要考虑几个因素。 以下是其中之一：

• 您团队的技能/专长
• 项目规模或性质（中，小型，企业）
• 使用资源

归根结底，关于React是否比Angular更好的争论确实是主观的。 这实际上归结于您的团队在特定库中的适应性，您正在从事的项目的性质以及程序员的个人喜好。

如果您的团队由新手组成，那么使用React而不是Angular是自然而然的事情，因为它的简洁性和对JavaScript的精辟表现非常出色。 否则，如果您的团队由经验丰富的专业人员组成，并且已经使用Angular相当一段时间，那么使用它可能是最佳选择。

结论

库，框架的每个目标都应该是简化开发人员的生活，使其长远而言富有成效并能够适应变化。 Javascript已经是一种凌乱的编程语言，许多人都在上面开发一个库或框架以使其更好。

就个人而言，我认为Angular在他们的新框架方面过分关注。 实际上，弊大于利（对不起，Angular用户没有冒犯性）。

最后，React给了我一线希望，因为考虑到在Babel，Webpack，Electron等众多我们需要捆绑的东西中，它仍然只是一个生态系统，因此现代Web开发应该不会那么难处理开发多平台应用程序的接缝比以往更加完美。

如果您是那种重视时间并热衷于学习其他堆栈以及现代Web应用程序来龙去脉的开发人员，请考虑学习React。 我强烈推荐它。 否则，请坚持使用Angular。

其他：React的最佳入门课程

如果您想精通使用React生态系统，可以参考以下几门课程：

如果您喜欢我的故事，请在Twitter上关注我，让我知道您的想法！

补充阅读：

翻译自: https://hackernoon.com/why-im-switching-from-angular-to-react-and-redux-in-2018-cb48be00fda7

angular和react