为什么要使用 React Redux?
Redux 本身是一个独立的库,可以与任何 UI 层或框架一起使用,包括 React、Angular、Vue、Ember 和原生 JS。虽然 Redux 和 React 通常一起使用,但它们彼此独立。
如果您将 Redux 与任何类型的 UI 框架一起使用,通常会使用一个“UI 绑定”库将 Redux 与您的 UI 框架绑定在一起,而不是直接从您的 UI 代码中与 store 交互。
React Redux 是 React 的官方 Redux UI 绑定库。如果您将 Redux 和 React 一起使用,您也应该使用 React Redux 来绑定这两个库。
要了解为什么要使用 React Redux,了解“UI 绑定库”的作用可能会有所帮助。
如果您对是否应该使用 Redux 有疑问,请参阅以下文章,讨论何时以及为何您可能想要使用 Redux,以及它的预期用途。
将 Redux 与 UI 集成
将 Redux 与任何 UI 层集成都需要一组相同的一致步骤
- 创建 Redux 存储
- 订阅更新
- 在订阅回调内
- 获取当前存储状态
- 提取此 UI 部分所需的数据
- 使用数据更新 UI
- 如果需要,使用初始状态渲染 UI
- 通过分派 Redux 操作来响应 UI 输入
虽然可以手动编写此逻辑,但这样做会变得非常重复。此外,优化 UI 性能将需要复杂的逻辑。
订阅存储、检查更新数据和触发重新渲染的过程可以变得更通用和可重用。像 React Redux 这样的 UI 绑定库处理存储交互逻辑,因此您不必自己编写该代码。
要更深入地了解 React Redux 的内部工作原理以及它如何为您处理存储交互,请参阅地道 Redux:React Redux 的历史和实现。
使用 React Redux 的原因
它是 React 的官方 Redux UI 绑定
虽然 Redux 可以与任何 UI 层一起使用,但它最初是为与 React 一起使用而设计和打算的。有许多其他框架的 UI 绑定层,但 React Redux 由 Redux 团队直接维护。
作为 React 的官方 Redux 绑定,React Redux 与来自任一库的任何 API 更改保持同步,以确保您的 React 组件按预期运行。它的预期用法采用了 React 的设计原则 - 编写声明式组件。
它为您实现了性能优化
React 通常很快,但默认情况下,对组件的任何更新都会导致 React 重新渲染组件树该部分内的所有组件。这确实需要工作,如果给定组件的数据没有改变,那么重新渲染很可能是浪费了一些努力,因为请求的 UI 输出将是相同的。
如果性能是一个问题,提高性能的最佳方法是跳过不必要的重新渲染,以便组件仅在数据实际更改时才重新渲染。React Redux 在内部实现了许多性能优化,以便您的组件仅在实际需要时才重新渲染。
此外,通过在 React 组件树中连接多个组件,您可以确保每个连接的组件仅从存储状态中提取该组件所需的特定数据片段。这意味着您的组件需要重新渲染的频率会更低,因为大多数情况下这些特定数据片段没有发生变化。
社区支持
作为 React 和 Redux 的官方绑定库,React Redux 拥有庞大的用户社区。这使得寻求帮助、了解最佳实践、使用基于 React Redux 的库以及在不同应用程序之间重用您的知识变得更加容易。
链接和参考
理解 React Redux
社区资源
- Discord 频道:#redux on Reactiflux (Reactiflux 邀请链接)
- Stack Overflow 主题:Redux,React Redux
- Reddit:/r/reactjs,/r/reduxjs
- GitHub 问题(错误报告和功能请求):https://github.com/reduxjs/react-redux/issues
- 教程、文章和更多资源:React/Redux 链接