我对 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 , 使单元测试更容易
为了让组件彼此通信, 你需要执行以下操作:
创建包含事件发射器的服务, 以使每个组件的通信成为可能
创建可以响应用户在全局组件中操作的事件发射器
为将使用全局事件的每个组件注入服务
为将使用它们的每个组件创建事件发射器, 并在订阅服务中创建事件
确保事件发射器将被取消订阅, 以使事件只触发一次
你仍然完成需要冗长的设置, 以便开始在组件彼此之间通信
来源: http://www.tuicool.com/articles/zUJbQfj