14、Flux架构中视图信息处理与ReactJS的应用

Flux架构中视图信息处理与ReactJS的应用

在Flux架构中，视图信息的处理和展示是至关重要的环节。本文将深入探讨Flux架构中视图的相关知识，包括子视图结构、用户交互性，以及如何使用ReactJS作为视图技术，还会涉及视图状态设置、视图组合、事件处理和路由操作等方面。

1. 子视图结构

在Flux架构中，存储（stores）的设计目标是每个顶级功能对应一个存储，这样可以避免复杂的数据结构层级带来的问题。而视图（views）则可以适当采用一定的层级结构。虽然顶级功能由单个存储提供信息驱动，但这并不意味着只能有一个视图来驱动用户体验。

视图需要进行一定程度的分解，否则会将所有的标记复杂性集中在一个地方。由于HTML标记本身具有层级性，所以视图在一定程度上应模仿这种结构，例如：

Feature View
  Child View
  Child View
  Child View
  Child View
  Child View
  Child View

视图和存储一样可以是通用的，多个功能可以使用通用组件以相同的显示模式展示信息。例如，一个可展开/折叠的面板可以被所有功能使用，将其集成到更大的功能中比重复实现其功能更合理。同时，所使用的视图技术也是决定如何将视图分解为更小可复用部分的因素，像ReactJS就很容易将粗粒度的视图由更细粒度的视图组合而成，因为它们大多是自包含的。

在组合视图层级时，要注意数据流。当Flux存储发生变化时，会发出更改事件，使顶级视图进行渲染，然后依次渲染其子视图。在存储状态流经这些视图的过程中，不应进行