Module 03 · In-depth Understanding of Advanced React Functionality深入理解 React 高级功能

Binding Redux and Flow绑定 Redux 与数据流

欢迎观看本视频！观看完后，您将能够：

解释 状态变化 的概念
描述 Redux 中的数据流
列举 单向数据流 在 Redux 中的优势

组件状态与状态变化

在 React 应用程序中，状态用于存储组件的属性。当组件的状态发生变化时，React 会通过触发 DOM（文档对象模型） 重新渲染来响应这些变化。随着应用程序的扩展，管理状态变得越来越困难，状态变化可能涉及组件之间的数据传输和一长串的 props，这往往会导致应用程序代码复杂化。

Redux 的解决方案

Redux 提供了一个开源的 JavaScript 库，用来管理应用程序的状态。它通常与 ReactJS 一起使用，但也可以与其他 JavaScript 库如 Angular 配合使用。Redux 通过提供一个 单一的状态存储 来简化代码，使状态更新变得更加容易。

React-Redux 应用的基本结构：

中央 Store：存储应用的状态树（state tree）。
Action：包含类型（type）和有效载荷（payload）的信息包，用于传递数据。
Reducer：接收旧的状态和 Action，并返回更新后的状态。
Subscription：当状态更新时触发，通知组件获取新状态并重新渲染。

Redux 中的数据流

数据流方向：单向流

在 React-Redux 应用程序中，数据流是 单向的，即数据始终沿着一个方向流动。数据流的过程如下：

用户与 UI 交互，触发组件中的 Action Creator 调用。
Action 被派发到 Redux Store。
Root Reducer 处理 Action，将其传递给应用中的所有其他 Reducer。
Reducer 判断是否需要根据 Action 更新状态，通常通过一个 switch 语句 来过滤所需的 Action。
如果 Action 类型匹配，Reducer 会返回一个新的状态（而非修改旧状态），并将其传递给 Store。
Store 更新状态后，通知相关组件获取新状态，并触发重新渲染。

重要提示：在 Redux 中，状态不会直接改变。每次状态变化时，Reducer 会生成一个 新的状态，它是旧状态的副本，并对其进行了修改。

单向数据流的优势

单向数据流 vs 双向数据流

早期开发者常用 双向绑定 来更改状态数据，以便 UI 反映出这些变化。Angular 和 Ember 等强大框架采用了双向绑定，但随着应用程序规模的扩大，双向绑定开始对浏览器性能产生不利影响，并且很难追踪数据流的变化。

单向数据流的优势

在 单向数据流 的模式下，通过构建 展示组件 和将它们包装在容器或 store 中（如在 Redux 应用程序中），能够有效解决这一问题。其优势包括：

易于管理大型应用：尤其是在前端重度的 Web 应用中，单向数据流让状态管理变得更加简单。
UI 操作与状态更新分离：UI 上的操作（如点击按钮）与由于这些操作引起的状态变化和更新相分离，简化了状态管理。
跨平台开发：React Native 使得我们能够快速创建适用于 iOS 和 Android 的应用程序，组件、Action 和 Reducer 可以在这些平台间共享使用。尽管在不同平台上会有一些视图组件的变化，但整体架构保持一致。

总结

在本视频中，您学习了以下内容：

当 组件的状态 发生变化时，React 会触发 DOM 的重新渲染。
Redux 中参与更新组件属性的元素包括：中央 Store、Action、Reducer 和 Subscription。
React-Redux 应用中的数据流是 单向的。
当 UI 操作 与 状态变化 分离时，管理状态会变得更加容易。