从AngularJS到Flux - 反应方式

Question

作为具有良好动手AngularJS经验的开发人员,如何使用React调整在Flux中编写Web应用程序的心理模型？

我不是在寻找一个Flux + React和Angular的答案(已经很多在线),但我想知道这两个"思维模式"中最大的区别是什么:事先,我被引入了Angular Way ; 相比之下,什么是反应方式？

当我离开Angular宇宙并过渡到Flux时,我需要关注的关键事项是什么？

差异首先,现在有相似之处:AngularJS非常自以为是,并且有一些非常大的禁忌,比如 - 不要将UI/DOM代码放在控制器中.React的重大禁忌和意见是什么？

最后但并非最不重要的是,Facebook将Flux视为MVC的替代品,但正如我所看到的 - React是视图引擎,商店是专注于单个域的模型容器,调度程序和操作构成控制器.那么实际上这不是MVC的名字吗？

Answer 1

我会让其他人与Angular进行比较/对比,但这里有两个问题的答案.

那么实际上这不是MVC的名字吗？

在Flux中存在数据/逻辑层和视图层之间的关注点分离并不能使其成为MVC.许多其他模式也有类似的分歧,最着名的是CQRS,可以说是Flux最亲近的堂兄.在MVC意义上,Flux中没有控制器.操作和调度程序不等于控制器.Controller-views很接近,但实际上它们在类似控制器的方面非常有限.一个关键的区别是,MVC控制器包含应用程序逻辑和行为在车型.相比之下,Flux存储包含所有应用程序逻辑,并且没有setter.

当我离开Angular宇宙并过渡到Flux时,我需要关注的关键事项是什么？

Flux的关键值:

• 简单而复杂.
• 程序员的心理模型至少与代码本身一样重要.
• 应用程序的某些部分应该高度分离,尽可能"了解"其他部分.
• 控制反转:所有控制都应驻留在管理状态的商店中.商店不会采取行动,而是采取行动.
• 应用程序在增长时应保持弹性和灵活性,从而可以更快速,更轻松地开发新的,意外的功能.

Flux的主要概念:

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

Flux应用的主要部分:

• 操作:包含新数据和特定类型的对象文字,允许商店识别它是否与其域相关.
• Dispatcher:一个回调注册表,通过回调,将一个有效负载(一个Action)分配给注册人(Stores).它没有自己的智慧.所有情报都在商店里.
• 存储:一个域模型,它向Dispatcher注册自己,并在其状态发生变化时发出'change'事件.
• 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