31

作为具有良好实践 AngularJS 经验的开发人员，我如何调整我使用 React 在 Flux 中编写 Web 应用程序的心智模型？

我不是在寻找 Flux+React vs Angular 的答案（网上已经有很多了），但我想知道这两种“心态”的最大区别是什么：事先，我被介绍到The Angular Way；相对而言，什么是React Way？

当我离开 Angular 世界并过渡到 Flux 时，我需要开始关注哪些关键事项？

首先是差异，现在是相似之处：AngularJS 非常固执己见，并且有一些非常大的禁忌，比如 - 不要将 UI/DOM 代码放在控制器中。React 的最大禁忌和观点是什么？

最后但并非最不重要的一点是，Facebook 将 Flux 称为MVC 的替代品，但正如我所看到的那样——React 是视图引擎，商店是专注于单个域的模型容器，调度程序和动作形成一个控制器。那么这实际上不是具有不同名称的 MVC 吗？

4

1 回答 1

53

我会让其他人与 Angular 进行比较/对比，但这里有一些对您的两个问题的答案。

那么这实际上不是具有不同名称的 MVC 吗？

Flux 中数据/逻辑层和视图层之间的关注点分离的存在并不使其成为 MVC。许多其他模式也有类似的分裂，最值得注意的是 CQRS，可以说是 Flux 的近亲。在 MVC 意义上，Flux 中没有控制器。Actions 和 Dispatcher 不等同于控制器。控制器视图很接近，但实际上在它们类似于控制器的方面非常有限。一个关键的区别是 MVC 控制器包含应用程序逻辑并作用于模型。相比之下，通量存储包含所有应用程序逻辑并且没有设置器。

当我离开 Angular 世界并过渡到 Flux 时，我需要开始关注哪些关键事项？

通量的关键值：

  • 简单大于复杂。
  • 程序员的心智模型至少与代码本身一样重要。
  • 应用程序的某些部分应该高度解耦，并且尽可能少地“了解”其他部分。
  • 控制反转：所有控制都应该存在于管理状态的商店中。商店不采取行动，而是通过行动通知。
  • 应用程序应在增长过程中保持弹性和灵活性，以便更快、更轻松地开发新的、意想不到的功能。

Flux 中的关键概念：

  • 单向数据流：Action → Dispatcher → Stores → Views
    • 状态的每一次变化和所有新数据都以一个分派的动作开始。
    • 这个四步数据流是 Flux 程序员的核心心智模型。
  • 分派导致应用程序状态的应用程序范围的转换。
    • 这是一个时刻，创造了变化的快照。这很容易推理。
    • 我们不能在调度时调度并保持这种简单性。因此，任何必然的变化都必须由最初的行动驱动。
  • 通量商店是领域模型，而不是 ORM 模型。它们包含所有逻辑并管理应用程序中特定逻辑域的所有状态。它们可能包含集合、奇异值或两者的组合。
  • Flux 假设派生数据（一个存储依赖于另一个存储的更改）在模型或存储管理规范化数据的复杂应用程序中是一种可能性。为了解决这个问题，Flux Dispatcher 应该公开一种机制来声明式地管理store 中的这种依赖关系。在 Facebook 的 Dispatcher 中，这是通过waitFor()方法完成的。这允许一家商店在继续自己的响应之前等待另一家商店对操作的响应。

Flux 应用程序的主要部分：

  • Actions：包含新数据和特定类型的对象文字，允许 Store 辨别它是否与他们的域相关。
  • Dispatcher：回调注册表，通过回调将有效负载（Action）分发给注册者（商店）。它没有自己的智慧。所有的情报都在商店里。
  • Stores：一个域模型，它向 Dispatcher 注册自身，并在其状态发生更改时发出“更改”事件。
  • Controller-views：查看组件树根附近的组件。他们监听商店中的“更改”事件，并通过商店公开的 getter 方法检索新数据并将其传递给他们的孩子来响应此事件。Controller-views 和 Views 之间的唯一区别是这个监听功能。
  • 视图：控制器视图组件的无状态子组件，接收和传递数据，很像纯函数。视图和控制器视图最常使用 React 实现，因为它提供了随意重新渲染的能力，而性能损失很小。
  • Utils：可以在不同模块之间轻松共享的纯函数库。

深入概述：http: //facebook.github.io/flux/docs/overview.html

教程： http: //facebook.github.io/flux/docs/todo-list.html

示例：https ://github.com/facebook/flux/tree/master/examples

动作和调度程序：http: //facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html

测试： http: //facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html

更多野外： http: //facebook.github.io/react/blog/2014/10/17/community-roundup-23.html

于 2014-12-03T08:41:59.917 回答