📜  将 Redux 与 ReactJS 一起使用有什么优势?

📅  最后修改于: 2022-05-13 01:56:36.150000             🧑  作者: Mango

将 Redux 与 ReactJS 一起使用有什么优势?

Redux 是 JavaScript 应用程序的状态管理工具。它更常与 ReactJS 一起使用,但也与许多其他框架兼容,例如 Angular、Vue、Preact 以及 vanilla JavaScript。需要注意的是,尽管 React 和 Redux 经常一起使用,但它们是相互独立的!

使用 Redux 的优点:

1. 集中式状态管理系统,即Store: React 状态本地存储在组件内。为了与应用程序中的其他组件共享此状态,将 props 传递给子组件,或者将回调用于父组件。另一方面,Redux 状态全局存储在 store 中。整个应用程序的所有组件都可以轻松地直接访问数据。这集中了所有数据,使组件很容易获得所需的状态。因此,在开发包含许多组件的大型复杂应用程序时,Redux 存储是非常受欢迎的。

2. 性能优化:默认情况下,每当更新组件时,React 都会重新渲染组件树该部分内的所有组件。在这种情况下,当给定组件的数据没有改变时,这些重新渲染就被浪费了(因为屏幕上显示的 UI 输出将保持不变)。 Redux 存储通过跳过此类不必要的重新渲染并确保给定组件仅在其数据实际发生更改时才重新渲染来帮助提高性能。

3. 纯reducer 函数:纯函数被定义为任何不改变输入数据、不依赖于外部状态并且可以始终如一地为相同输入提供相同输出的函数。与 React 不同的是,Redux 依赖于这样的纯函数。它采用给定的状态(对象)并将其传递给循环中的每个减速器。如果有任何数据更改,则从 reducer 返回一个新对象(重新渲染发生)。但是,如果没有更改(没有重新渲染),则会返回旧对象。

4. 存储长期数据:由于redux中存储的数据一直持续到页面刷新,所以它被广泛用于存储用户导航应用程序时需要的长期数据,例如从API加载的数据,通过提交的数据表单等。另一方面,React 适合存储可能快速变化的短期数据(表单输入、切换等)

5. 时间旅行调试:在 React 中,在调试过程中跟踪应用程序的状态成为一项繁琐的任务。 Redux 使调试应用程序成为一个简单的过程。由于它代表了应用程序在任何给定时间点的整个状态,因此广泛用于时间旅行调试。它甚至可以向服务器发送完整的错误报告!

6. 强大的社区支持由于 redux 拥有庞大的用户社区,学习最佳实践、在遇到困难时获得帮助、在不同应用程序中重用您的知识变得更加容易。此外,还有许多 redux 扩展有助于简化代码逻辑和提高性能。