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

IsraelCavan 6年前
   <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>