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

   <p>我对 Angular 又爱又恨已经有一段时间了。这很有趣，因为我正在学习，而且在做一个简单的应用程序时，我被卡住了好几周。</p>    <p>我注意到，即使在制作最简单的特性的过程中，我甚至不确定它是否值得使用 Angular 。我彻底掌握了基本的基本原理，这足以使小的特性发挥作用。</p>    <p>但是，它没有成功。更糟糕的是，我甚至根本不使用 Javascript 。它更像是一种完全不同的语言。</p>    <p>我喜欢 Typescript  ，但不知怎的，我在使用它时变得烦躁不安，因为我花了很多时间来掌握 Javascript 的细节。而且感觉我还在做一些后端工作(依赖注入、服务等)。奇怪的是，所有的事情都让人感到熟悉和沮丧。</p>    <p>然后有一天，我最终放弃使用 Angular 并寻找诸如 <strong>React </strong> 和  <strong>Vue </strong> 等其他选择。我在 2015 年 React 发布时有尝试过 React 。我记得它当时处于测试阶段，有很多人都在谈论它。 我不明白它的全部流程，比如 “ <strong>state</strong> ” 。</p>    <p>但在 2017 年第四季度左右，我尝试重温并观看与 React 和 Redux 相关的课程。 我很好奇大家为什么对这个库感到大惊小怪，它在 2017 年左右疯狂流行，其所谓的数据不变性也在大肆宣传。</p>    <p>我喜欢 AngularJS（ Angular 的第一个版本），以至于我喜欢它的“怪癖”并对它进行了很多研究。 但是，当我转移到 Angular 2+ 并投入了时间去研究时发现，我觉得有些东西不对，并且出于某种原因，它可能无法提供 React 中最简单的功能。 </p>    <p>快速使用：最后我很高兴我做到了。 一旦你了解  <strong>React </strong> 的基本原理，实际上很容易实现这些基本功能。</p>    <p>我几个月来一直在我的新项目中使用 React ，并且我可以真正地说我没有后悔尝试使用 React 生态系统。 从那以后，我再也不用依靠 Angular 了。</p>    <p>所以，如果你可能会问：是什么让我从 Angula 转到 React ？ 仅仅只是灵活性吗？</p>    <p>小争论：不要拿苹果和橘子比较</p>    <p>我的意思是在这两个生态系统中我都没有受到任何损失，可能我们只是说，在 React 中整合新功能比 Angular 更容易，因为 React 是一个 <strong>库</strong> ，Angular 是一个 <strong>框架</strong> 。 大多数人都忽略了两者之间显著存在的巨大差异。</p>    <p>当你使用一个库时，它只是你应用程序的一部分。所以显然，学习曲线也很小，你甚至可以混合使用其他一些库。</p>    <p>框架对你开发影响是很大的。而且你应该遵守他们的标准使用方式（例如做 http 请求，组件绑定，事件绑定等）。简而言之，在使用 Angular 的情况下，你需要以“ <strong>angular</strong> ”的方式来做事情。因为你使用的是框架，所以你必须遵循它。 </p>    <p>这与只负责视图部分的 React 情况不同。除此之外，你可以自行发现可能想要用于执行 http 请求以及订阅密钥绑定的内容。你可能想要使用 <a href="/misc/goto?guid=4959757452584682144" rel="nofollow,noindex">Redux</a> 或  <a href="/misc/goto?guid=4958973395995344945" rel="nofollow,noindex">Flux</a> 来进行数据存储和状态管理。你有很大的自由空间。</p>    <p>那么，下面是我现在使用 React 的原因：</p>    <p>它是一个库。因此，你可以附加任何你想要的 JavaScript 库作为附加组件</p>    <p>这很明显，因为 React 只是另一个 JavaScript 库，而不是框架。如前所述，在 React 中，你可以轻松地附加任何想要的库。只要你知道你在做什么，它并不关心 JavaScript 中的堆栈环境。 React 的理念围绕“乐高积木”的概念展开。这是你可以在库中获得的一个重大优势，也是你可以拥有的最强大的好处之一。我们都知道技术来来去去基本都是那几种。那么为什么你仍然需要把大部分时间都花在学习一个框架中呢？</p>    <p>这就是为什么我切换到 React 的原因：只使用我需要的东西。我可能不需要全面的框架，因为我不会以其他的方式使用框架的大部分功能。关键是，不管你的应用是过度设计还是架构良好，你仍然无法躲避在过程中引入错误的现实。既然如此，为什么还要过度设计？</p>    <p>当我尝试创建一个涉及附加全局事件处理程序的功能时，在 Angular 中，为了实现这个功能而需要做大量工作！</p>    <p>我搜索了几次 StackOverflow ，答案都是一样的。为了完成这项工作，需要经历一系列的挑战，实际上就是需要 <strong>大量开发工作</strong> 。 但我通过使用 Event Emitters 只花了一天时间就解决了这个问题。也就是说，对于一些简单的事情，它仍然需要大量的工作。</p>    <p>我并不是说 Angular 执行得不够好。 但是，可能我仍然需要投入大量时间才能完成简单的工作。</p>    <p>React 通过使用另一个名为 <strong>mousetrap </strong> 的 js 库来实现这一点，以实际绑定整个应用中的全局键值。 现在我可以使用我在 Vanilla JavaScript 中学到的东西了。</p>    <p>P.S：React 具有极大的灵活性的同时也具备良好的职责分工。</p>    <p>状态管理更加灵活</p>    <p><img src="https://simg.open-open.com/show/605c600efb147b6a8815def120d64e5a.gif"> 如果没有像 Flux 和 Redux 这样的库补充到 React 生态系统中，我可以说， React 可能与 Angular 依赖注入和服务模式是同等的。我不太喜欢使用这些模式，特别是在做一些前端的事情时。也许我只是不习惯使用它，因为在后端使用它更有意义，但在前端更少。</p>    <p>在我开始使用 React 和 Redux 一段时间后，我注意到，管理状态和在组件的不同部分分配那个状态是多么容易和轻松。这很神奇，因为它更强调每个 React 和 Redux 结合在一起的“状态”。</p>    <p>那么为什么它这么重要？因为它使你的沟通在你的组件的所有部分看起来毫不费力。你只需要发送一个动作，创建一个减速机，连接并知道它是什么 “state” ，瞧! 这个状态将反映在所有使用它的组件中，只要你修改了该状态。只有当你使用 Flux 和 Redux 时，这才是正确的。</p>    <p><img src="https://simg.open-open.com/show/3dfafe08cb682c1114943fadcbe80259.png"></p>    <p>一个理想的用例是当两个或多个组件依赖相同的数据或状态时，只需通过简单地将组件连接到 Redux 来轻松地检索它们。例如，我的仪表盘上的组件都需要同样的数据，并很好的在模态框中显示，以让我更容易把它们连接起来。</p>    <p>为实现这个目标，你需要做以下的事情：</p>    <ul>     <li> <p>在你的 React App 中加入 Redux</p> </li>     <li> <p>创建一个 由 <strong> <em>Dispatchers</em> </strong> ,  <strong> <em>Actions</em> </strong> ,  <strong> <em>Reducers </em> </strong> 组成的 Redux store</p> </li>     <li> <p>把你的组件连接到 Redux Container</p> </li>     <li> <p>在你的组件内部使用 Application State</p> </li>    </ul>    <p>当然，在这样做时，你也必须小心，因为随着应用的增长，它可能会变得更加混乱。在所有的灵活性中总是有一个权衡，无论是编程语言还是库。 <a href="/misc/goto?guid=4959757187425935781" rel="nofollow,noindex">Abramov</a> 在他的博客中进一步表示： <a href="/misc/goto?guid=4959754509891787460" rel="nofollow,noindex">你可能不需要 Redux</a> 。</p>    <p>现在，让我们来看看 Angular 是如何做的：</p>    <p><img src="https://simg.open-open.com/show/b134fef90f95932e8b9e09e483444edc.png"></p>    <p>带有 Service 的组件作为中心连接一个组件与另一个组件进行通信。</p>    <p>全局状态方法也可以用 Angular 2+ 的方式进行。你可能会说，它与 React 工作方式完全不同，因为它使用 <a href="/misc/goto?guid=4959757452755662778" rel="nofollow,noindex">服务模式</a> 作为 Angular 核心模式，主要是为了迎合 API ，使单元测试更容易。</p>    <p>为了让组件彼此通信，你需要执行以下操作:</p>    <ol>     <li> <p>创建包含事件发射器的服务，以使每个组件的通信成为可能。</p> </li>     <li> <p>创建可以响应用户在全局组件中操作的事件发射器。</p> </li>     <li> <p>为将使用全局事件的每个组件注入服务。</p> </li>     <li> <p>为将使用它们的每个组件创建事件发射器，并在订阅服务中创建事件。</p> </li>     <li> <p>确保事件发射器将被取消订阅，以使事件只触发一次。</p> </li>    </ol>    <p>你仍然完成需要冗长的设置，以便开始在组件彼此之间通信。</p>    <p> </p>    <p>来自：https://www.oschina.net/translate/why-im-switching-from-angular-to-react-and-redux-in-2018</p>    <p> </p>