加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

【全栈React】第18天: Flux 简介

发布时间:2020-12-15 06:55:42 所属栏目:百科 来源:网络整理
导读:本文转载自:众成翻译 译者:iOSDevLog 链接:http://www.zcfy.cc/article/3812 原文:https://www.fullstackreact.com/30-days-of-react/day-18/ 处理客户端应用中的数据是一项复杂的任务。今天我们正在研究一种处理Facebook提出的复杂数据的方法,称为 Flu

本文转载自:众成翻译
译者:iOSDevLog
链接:http://www.zcfy.cc/article/3812
原文:https://www.fullstackreact.com/30-days-of-react/day-18/

处理客户端应用中的数据是一项复杂的任务。今天我们正在研究一种处理Facebook提出的复杂数据的方法,称为 Flux 体系结构。

随着应用变得越来越复杂,我们需要更好的数据处理方法。有了更多的数据,我们将有更多的记录。

我们的代码需要使用新功能处理更多的数据和应用状态。从异步服务器响应到本地生成的、不同步的数据,我们不仅要跟踪这些数据,还要将其与视图保持正常的联系。

认识到对数据管理的需求,facebook 团队发布了一种处理数据的模式,称为 Flux。

今天,我们将看一下Flux体系结构,它是什么以及它存在的原因。

什么是flux

Flux是一种用于管理数据如何通过React应用流动的模式。正如我们所看到的,使用React组件的首选方法是通过从一个父组件向它的子组件传递数据。Flux模式使此模型成为处理数据的默认方法。

在Flux方法中处理数据有三不同的角色:

  • Dispatcher 派发器

  • Stores 储存

  • Views (our components) 视图层(我们的组件)

Flux的主要思想是,有一个单一源 (Stores 储存),他们只能通过触发 actions 更新。这些操作负责调用派发器,Stores可以 订阅 更改并相应地更新自己的数据。

When a dispatch has been triggered,and the store updates,it will emit a change event which the views can rerender accordingly.当发送已触发,并且存储更新时,它将发出一个更改事件,视图可以据此 重新渲染。

这似乎没必要这么复杂,但结构使它难以置信地容易推理,我们的数据来自哪里,导致它的变化,如何改变,让我们跟踪特定的用户流,等等。

Flux 背后的关键理念是:

数据流向一个方向,并完全保存在Stores中。

实现

虽然我们可以创建我们自己的flux实现,许多已经创建了一些梦幻般的库,我们可以挑选。

  • Facebook's flux

  • alt

  • nuclear-js

  • Fluxible

  • reflux

  • Fluxxor

  • flux-react

  • 更多... 许多许多许多

插件

我们深入讨论这个材料关于Flux,使用库,甚至实现我们自己的版本的Flux,最适合我们。
查看 fullstackreact.com

它可能是相当激烈的尝试为我们的应用选择 正确 选项。每个人因为不同的原因都有自己的特点,是伟大的。然而,在很大程度上,React社区已经集中在使用另一种称为Redux的flux工具。

Redux

Redux是一个小的库,它的设计灵感来自flux模式,但本身不是一个纯粹的flux实现。它提供了相同的一般原则,围绕如何更新我们的应用中的数据,但以略微不同的方式。

与Flux不同,Redux不使用派发器,而是使用纯函数来定义数据变异函数。它仍然使用Store(储存)和Action(动作),可以直接地被栓到React组件。

3 主要原则的Redux我们将牢记在我们的应用中实现Redux是:

  • 使用纯函数进行更新 (in reducers 在归约器中)

  • state 是只读属性

  • state是唯一的来源 (一个Redux的应用只有一个Stores 储存 )

Redux和Flux的一个大的区别是中间件的概念。Redux增加了中间件的想法,我们可以使用它来操作我们接收到的操作,无论是进入还是从我们的应用中。几天后我们再详细讨论。

在任何情况下,这是很多介绍的flux模式。明天,我们将实际开始移动我们的数据使用Redux。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读