5、Flux架构原理与骨架架构构建

Flux架构原理与骨架架构构建

1. Flux架构原理

1.1 组件扩展难题

在构建系统时，若要添加新层级，往往需要在新层级及更高层级添加多个新组件。这就要求我们在水平和垂直多个方向上扩展组件层级结构。然而，多方向扩展组件颇具难度，尤其是在没有明确数据流方向的组件层级中。输入可以在层级的任何级别进入并改变状态，这无疑会产生副作用。若依赖其他层级的组件，情况会变得更加复杂。

1.2 Flux架构的数据流与层级

Flux架构具有独特的层级结构，相较于传统层级结构，更利于架构扩展。原因在于，我们只需在架构的每个层级内水平扩展组件，无需添加新的组件和层级。以下是Flux架构扩展的示意图：

Action
Action
...
Store
Store
...
View
View
...

无论应用规模如何扩大，都无需添加新的架构层级，只需在现有层级中添加新组件。这是因为三个层级在更新循环中都发挥着作用，更新循环从动作开始，以最后一个视图渲染结束，数据在应用中按单一方向从一个层级流向另一个层级。

1.3 应用数据与UI状态

在传统架构中，通常将展示和应用数据分开处理，这就需要在两个不同的地方管理状态。但在Flux架构中，唯一存储状态的地方是存储（Store）。下面我们来比较应用数据和UI数据，探讨导致用户界面变化的转换过程，以及Flux存储以功能为中心的特性。

1.3.1 两种状态的常见处理方式

从API获取的应用数据通常会被输入到视图层（也称为展示层），该