15、Flux架构中的信息生命周期与组件特性解析

Flux架构中的信息生命周期与组件特性解析

1. Flux架构视图层基础

在Flux架构里，视图层有着独特的工作方式。首先，变更事件对于在视图中反映存储状态至关重要，视图在初始渲染时常常直接从存储读取信息。而且，视图通常是无状态的，给定UI元素的状态应存于存储中，因为应用的其他部分可能依赖该状态，并且我们不希望查询DOM。

视图组件有几个重要的高级职责：
- 渲染存储信息
- 用较小的视图组件组合出更大的视图结构
- 处理用户交互

以下是一个有状态组件的示例代码，它监听存储的变更事件：

// Sets up the store "change" listener.
componentWillMount() {
  first.on('change', this.onChange);
}
// Removes the store "change" listener.
componentWillUnmount() {
  first.removeListener('change', this.onChange);
}

这个组件是有状态的，因为必须如此。由于最初是由路由器渲染组件，所以我们只能通过设置其状态来重新渲染它。通过为变更事件设置处理程序，我们就能重新渲染组件以反映存储的状态。同时，该组件还有生命周期方法来监听存储的变更事件，以及移除监听器。若不移除监听器，它会尝试在未挂载的组件上设置状态。

2. 前端架构组件生命周期难题

任何信息系统都有生命周期，前端JavaScript架构中的组件也不例