摘要：是用户建立客户端应用的前端架构，它通过利用一个单向的数据流补充了的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用。结构和数据流一个单向数据流是模式的核心。
Flux是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用Flux。
结构和数据流Flux应用有三个主要部分：Dispatcher调度 、存储Store和视图View(React 组件)，这些不应该和MVC:Model-View-Controll(模型-视图-控制器)混淆，控制器在Flux应用中是存在的，但是他们是controller-view(控制器-视图)，视图通常在一个结构顶部，而这种结构是用来从存储stroe获得数据，然后将数据传递到自己的子结构们，此外，Action创建者-Dispatcher的帮助类的方法 -用于支持一个语义API，这个API是描述应用程序中所有变化的可能，通常可将它们看成是Flux更新循环的第四部分。
Flux是以单向数据流方式支持MVC，当一个用户和React视图交互时，视图会将这个动作传播到一个中央Dispatcher，一直到各种存储，在那里保存着应用的数据和业务逻辑，这个使用React的声明式风格的过程是非常棒的，能够允许存储发送更新信息，而无需指定在状态之间如何切换视图。(传统方式更新状态后，会推出一个新的视图页面。)
Flux最初是用于正确导出数据，比如如果我们要显示一系列消息的未读数字，而另外一个视图显示的是所有消息，其中未读的消息会高亮显示。这种情况使用MVC很难处理，将一个消息变为已读状态需要更新消息模型，然后再需要更新未读的计数模型(将未读模型数字减1，因为刚发生一个已读改变)，这种依赖和级联更新经常发生在大型MVC应用，导致一个混乱的数据流编织和不可预知的结果。
控制器被存储反转控制：存储接受更新，适当地调节这些更新，而不是一致地依赖外部更新其数据，存储之外根本不知道它是如何管理领域数据的，这有助于实现一种清晰的分离关注。存储并没有直接的类似setAsRead()之类的方法，而是只有一个单一方式获取数据到其自成一体的世界中，这个方式就是回调，注册在dispatcher中的callback。
一个单向数据流是Flux模式的核心。dispatcher 存储和视图是有着不同输入输出的独立节点，Action动作是一个简单对象，只是包含新的数据和一个标识符类型的属性。
视图也许引起新的动作Action，这个动作作为用户交互的响应将在整个系统传播：
所有通过dispatcher的数据流将作为一个集中式Hub，动作Action在一个action creator方法中被提供给dispatcher，这个动作通常来自于视图中用户的交互，dispatcher然后调用存储已经注册其中的回调函数，分发Action动作到所有的存储，在它们注册的回调函数中，存储会响应每个和它保存的状态有关的每个动作Action，存储然后发射一个 change改变的事件去提醒controller-view控制器-视图，更新到刚刚改变的新数据。controller-view监听这些事件，然后在一个事件处理器中从存储中获取数据，controller-view调用它们自己的"setState()"方法，这会触发视图的重新渲染，包括DOM组件树中所有更新。
这个结构允许我们能够以比较理性的方式编程，这有点类似functional reactive programming, or 或 data-flow programming 数据流编程或 flow-based programming。
通过应用的数据流是一个方向，没有两边绑定(two-way bingding：Angular.js有此方式)，应用状态在存储中维护，允许应用不同部分保持解耦，在存储之间发生依赖的地方，它们能够保持严格的层次关系（设计原则：尽量松耦合，无法回避的就变成树形层次结构），同步管理由dispatcher负责。而two-way绑定会导致级联更新，当一个对象改变导致另外对象改变，接着会触发更多的更新，当应用规模增长时，这些级联更新会使得预期响应用户交互的结果变得困难，当更新只会在一个轮回中发生改变数据时，整个系统就变得可预期。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105569.html
摘要：作为大型应用状态管理最常用的工具。它是一个应用数据流框架，与框架类似。这是触发变化的惟一途径。在这个函数内部，被调用，其作用是监测是的。否则的话，认为只是一个普通的，将通过也就是进一步分发。到此源码的主要部分学习结束。 Redux作为大型React应用状态管理最常用的工具。它是一个应用数据流框架，与Flux框架类似。它是零依赖的，可以配合其他框架或者类库一起使用。虽然在平时的工作中很多...
摘要：学习之道简体中文版通往实战大师之旅掌握最简单，且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授，并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。 《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅：掌握 React 最简单，且最实用的教程。 showIm...
摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。 本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。 继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...
摘要：增强除了解决复用问题，高阶的另一个重要作用就是对原始的进行增强。就是典型的利用高阶来增强的例子，它主要作用是使任意变成可以执行撤销和重做的全新。 在Redux架构中，reducer是一个纯函数，它的职责是根据previousState和action计算出新的state。在复杂应用中，Redux提供的combineReducers让我们可以把顶层的reducer拆分成多个小的reduce...
摘要：原文地址由于只涉及层的处理，所以构建大型应用应该搭配一个框架模式才能使后期维护成本相对较小正是官方给出的应用架构，他推崇一种单向的数据流动模式，看下图感受下整个流程是用户与层交互，触发使用进行分发触发回调进行更新更新触发层事件层收到信号进 原文地址：https://gmiam.com/post/react-... 由于 React 只涉及 UI 层的处理，所以构建大型应用应该搭配一个框...
阅读 2753·2023-04-25 14:41
阅读 2340·2021-11-23 09:51
阅读 3635·2021-11-17 17:08
阅读 1616·2021-10-18 13:31
阅读 5478·2021-09-22 15:27
阅读 883·2019-08-30 15:54
阅读 2186·2019-08-30 13:16
阅读 705·2019-08-29 17:04
