我应该使用助焊剂吗？
对于初学者来说，Flux 非常不直观，入门级文档很少，也没有明确的解释。当我正在尝试学习Flux 时，有人可以告诉我：我应该使用Flux 吗？
如果您的应用程序使用动态数据，您应该使用Flux。
如果你的页面只是一个静态页面，不共享状态，那么你不需要存储和上传数据，也不需要使用Flux。 Flux 没有任何好处。
为什么要助焊剂？
幽默地说，Flux是一个相对困难和复杂的概念。为什么增加了复杂性？
90% 的iOS 应用程序将数据传递到表视图。 iOS封装了很棒的视图组件和数据模型，方便开发者开发。
前端开发（HTML、JavaScript、CSS）中没有这样的概念。这意味着我们有一个大问题：我们不知道如何构建前端应用程序。我在这个行业工作了很多年，从来没有见过有人讨论“最佳实践”。相反，我们讨论jQuery、Angular 和Backbone 等类库，但避免了最重要的问题：数据流。
什么是通量？
Flux 是一个名词，描述了处理数据流的方法，主要使用特殊事件和侦听器。这里没有官方的Flux 库，但您需要使用Flux Dispatcher 和事件库。
官方文档写得就像某人脑子里的意识流一样，对于初学者来说是一个很好的起点，他们可以理解作者并补充作者没有写的内容，直到他们对Flux 有了深入的了解。文档。
不要尝试比较Flux 和MVC 架构。它只会让你更加困惑。
让我们开始吧。我将一一解释每个概念。
1.视图层“Dispatch”“Actions”（分发操作）
调度程序基本上是一个添加了附加规则的事件系统。调度事件并定义回调函数。 只能定义一个全局调度程序。您可以使用Facebook 的Dispatcher 库。例如：
`var AppDispatcher=new Dispatcher();`
例如，单击“新建”按钮将项目添加到列表中。
“新物品”
单击时，视图会调度一个非常具体的“操作”，其中包含操作名称和新项目data:
单击时，视图层会触发一个特定事件，其中包括项目名称和项目数据。
createNewItem: function( evt ) { AppDispatcher.dispatch({ actionName: 'new-item', newItem: { name: 'Marco' } //示例数据});}
“行动”也是Facebook创造的一个词。 Action 是一个Javascript 对象，它代表您想要执行的操作和您需要的数据。如上所述，我想创建一个新项目，我需要的数据就是名称。
2.“Store”响应调度的动作（调度事件）
该应用程序需要列表的特定逻辑和数据收集。这称为列表存储。
Flux 中的“store”一词也是Facebook 创造的术语。我们的应用程序需要一个集合来存储状态。这称为列表存储。
由于Store是单例，所以不需要使用new。 ListStore 是一个全局对象。
//表示列表数据和逻辑变量的单个对象ListStore={ //模型数据项的实际集合： []};
然后，商店响应所调度的事件。
var ListStore=…//告诉调度程序您想要收听*any*。 //调度事件AppDispatcher.register( function( Payload ) { switch( Payload.actionName ) { //你知道如何处理这个动作吗？ case 'new -item': //更改数据ListStore .items.push(有效负载.newItem )});
这就是传统Flux 处理事件回调调度的方式。有效负载包括事件名称和数据。使用switch 语句来决定调用哪些操作、响应回调、修改数据或执行其他操作。
核心要点： 商店不是模型，它们是模型的容器。
核心点： 只有商店知道如何更新应用程序内的数据。这是Flux最重要的部分。我分发的事件是我不知道如何添加或删除项目。
再举一个例子，如果您需要在应用程序的其他部分存储图像及其元数据，则应该使用名为ImageStore 的单独存储。商店代表您的应用程序的另一个域。如果您的应用程序足够大，您可以将其拆分为多个区域。如果您的应用程序很小，您可能只需要一个商店。
只有商店可以注册回调。视图永远不应该调用AppDispatcher.register。调度程序的存在是为了将消息从视图传递到存储。视图响应其他类型的事件。
3. 存储触发“change”事件
现在数据发生了变化，我们需要通知其他部分。
Store 触发事件，但Dispatcher 不触发。这可能会令人困惑，但这就是Flux 的工作原理。接下来，将该活动添加到您的商店。如果你使用MicroEvent.js，你可以这样写：
`MicroEvent.mixin(ListStore);`
接下来是触发事件。
case 'new-item': ListStore.items.push( payload.newItem ); //告诉世界你做出了改变！
:的核心思想是简单地触发一个事件，而不传递最新的item。 View只考虑内容是否发生变化。下面解释其原因。
4.视图层响应“change”事件
接下来，我们需要显示列表。当列表更改时，视图将完全重绘。
首先，当组件被“激发”时，监听组件创建时的ListStore 更改事件。
ComponentDidMount: function() { ListStore.bind( 'change', this.listChanged );},
为了简单起见，直接调用forceUpdate来触发重绘。另一种选择是将整个列表保存在一个状态中。
listChanged: function() { //由于列表已更改而触发新的渲染。 this.forceUpdate();},
记得在组件加载时，即组件调用回调函数时，清除监听函数。
ComponentWillUnmount: function() { ListStore.unbind( 'change', this.listChanged );},
接下来，我们来看看Render 函数，我们特意把它留在了最后。
render: function() { //请记住，ListStore 是全局的。 //无需传递var items=ListStore.getAll(); //循环遍历列表并构建列表项标记var itemHtml=items. function( listItem ) { //'key' 很重要//必须每个列表项的唯一标识符。
{ 列表项.名称}
; }）; 返回
{项目HTML}
新物品
;}
整个过程看起来是这样的。添加项目时，视图项会触发行为，存储会响应该行为，存储会更新，存储会触发更改事件，并且视图会重绘以响应更改事件。
但有一个问题。每次列表更改时都重新绘制整个视图，效率非常低。
不。
是的，渲染函数实际上被调用了，并且渲染函数内的所有代码都被一遍又一遍地执行。然而，React 仅在DOM 实际发生变化时才渲染变化。 render 函数生成一个虚拟DOM，React 将其与之前渲染中渲染的DOM 进行比较。如果两个虚拟DOM 不同，React 会更新真实DOM 中发生变化的部分。
核心思想： 如果存储发生变化，视图不需要关心条目是否被添加、删除或修改。只需要一次完整的重绘，React 的“虚拟DOM”算法会执行复杂的计算来检查实际DOM 节点是否发生了变化。通过这样做，您可以简单而无压力地生活。
补充：“Action Creator”到底是什么？
请记住，单击按钮将触发事件。
AppDispatcher.dispatch({eventName: 'new-item', newItem: { name: '萨曼莎' }});
但是，如果您认为有很多地方需要触发此事件，则这太冗长了。此外，所有视图都必须知道事件对象的具体格式。这有点棘手。 Flux 提出了一个称为动作创建者的抽象层。这实际上是将上面的代码合并到一个函数中。
ListActions={ add: function( item ) { AppDispatcher.dispatch({eventName: 'new-item', newItem: item }};
现在视图只需要调用ListActions.add({ name: '.' }); 并且不必担心分布式对象语法。
未解答的问题
所有关于Flux 的文章主要讨论如何管理数据流，但不回答以下问题：
如何在服务器上加载、保存和更新数据？
组件如何在不使用父组件的情况下相互通信？
我应该使用哪个事件库？
我应该使用哪个事件库？
Facebook 为什么不将Flux 相关的库打包成一个类库？
我应该使用像Backbone 这样的模型层作为我的商店的模型吗？
我可以使用数据层而不是存储，例如Backbone 的模型吗？
这些问题的答案是： 开心就好！
PS: 不要使用强制刷新
我用强制更新作为一个简单的例子。更新视图的正确方法是读取store中的数据，将该数据复制到state，读取this.state，然后调用render函数来更新它。让我们看一下这个例子。 TodoMVC 示例。
首次加载模板时，商店数据会复制到状态，当商店更新时，数据会再次完全复制。这会更好，因为它只是内部的，并且更新将通过setState 同步完成，从而更加高效。
最重要的是！
作为附加资源，请查看Facebook 提供的示例Flux 应用程序。看完这篇，我想js/文件夹下的文件会更容易理解。
Flux 文档包括一些高级技术和一些深入的内容。
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。