Redux 是一个可以帮助你管理应用程序状态的 JavaScript 库。它是一个可预测的状态容器，与 React 一起使用可以提高应用程序的效率和性能。在本文中，我将详细介绍如何使用 Redux 优化 React 应用程序的性能。
1. Redux 简介
Redux 是一个状态管理工具，它使用单一形式的数据存储应用程序的状态。使用 Redux，您可以将应用程序状态放置在一个被称为“store”的中央位置，并通过使用特定的函数来修改它。Redux 通过提供跨组件的数据流和更加可预测的代码来简化 React 应用程序开发。
Redux 中的三个关键元素是 “store”、“reducers” 和 “actions”。
- Store：应用程序状态的单一存储点
- Reducers：捕获对象并更改应用程序状态的函数
- Actions：Redux 的操作可以触发状态更新
2. 为什么使用 Redux 来优化性能？
在 React 中，数据流是单向的。当组件的状态（state）更新时，它会引起其他组件和状态属性的更新，并且组件将重新渲染。由于应用程序状态管理的方式，应用的敏感数据易于控制，因此更新状态将对应用程序的性能产生正面影响。由于在 React 应用程序中，保持状态的同步是非常困难的，故使用 Redux 优化 React 应用程序的性能是非常可行的。
除了协助优化 React 应用程序的性能之外，Redux 还提供了以下其他优点：
- 易于调试和测试
- 使状态更容易处理
- 通过更好地组织应用程序逻辑来提高代码可读性
3. 在 React 中使用 Redux
了解 Redux 可以使您更好地了解在 React 中如何将其应用。要使用 Redux，您需要遵循以下步骤：
- 通过 npm 或 yarn 安装 Redux
- 导入 Redux 包和 required 中间件。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';- 创建 Redux Store。
const store = createStore( rootReducer, applyMiddleware(thunk) );
- 创建 Action（操作），包括 type 值和需要更新的数据。
export const addTutorial = (tutorial) => ({
type: ADD_TUTORIAL,
payload: tutorial,
});- 创建 Reducer（捕获对象并更改应用程序状态的函数）。
-- -------------------- ---- -------
----- ------------ - -
---------- ---
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------
------ -
---------
---------- -------------------- ----------------
--
--------
------ ------
-
-- 使用 Redux Store
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ ----- ---- ----------------
----------------
--------- --------------
---- --
------------
-------------------------------
--以上就是在 React 中使用 Redux 的主要步骤。就像 React 一样，Redux 库是出色的状态管理工具。但是，要完全利用它，您需要了解 Redux 的使用方式以及如何在 React 中使用它。
4. 如何使用 Redux 来进行性能优化？
我们已经在前面的章节中看到过如何在 React 中使用 Redux。 现在，让我们了解几种使用 Redux 优化 React 应用程序性能的方法。
4.1 通过将 State 与 Props 区分开来进行标准化
将状态（state）提升到更高的组件层级中是一个很好的技术，这样可以通过将状态共享到下层组件中来避免重复。
这里还有一个解决方案，Redux 可以使数据标准化。这是通过将 State 与 Props 区分开来实现的。将 Redux 应用程序状态管理与 React 组件开始分离可以具体化应用程序的状态和修改组件。这有助于提高代码的可读性，使应用程序维护更加容易。
4.2 避免直接在 Prop 中执行任何逻辑
React 组件使用 Props 和状态进行更新。将逻辑绑定到 Props 可能会比较危险，这是因为在 Props 中直接执行任何逻辑都可能对应用程序的可维护性造成影响。
Redux 可以将所有逻辑放在单个函数中，并且使用 Class 有助于将所有逻辑置于单个对象中。
4.3 使用 React-Redux 来处理与服务器的 API 调用
许多 React 应用程序使用 Redux 来管理 API 调用。一个收藏的每日文章管理器应用程序来自一个 Node.js 后端 API 的服务器可能是一个例子。 在 Flux 应用程序中，正在处理 AJAX 数据的 Redux-Thunk 函数会返回 Promise 对象。 只有操作被处理后，Redux-Thunk 才会异步触发 Action。
这里还有一个工具名为 “React-Redux”。这个名字叫起来很像一个库，但实际上，它是一个提供作为 Redux Store Provider 的 Store 的 higher-order 组件、以及将 State 和 Dispatch Props 传入 React 组件的 connect 函数。将 Redux-Thunk 与 React-Redux 配合使用，您可以在 React 组件中使用全局 Redux Store 方法，以便执行 AJAX 调用并更新应用程序状态。这是一种很有效的方案。
结论
了解 Redux 并在 React 中使用它可以使您的 React 应用程序更快，更符合预期，更容易维护。 请注意，Redux 不是万能的解决方案，但它可以成为 React 应用程序所需的机构。在大型 React 应用程序中使用 Redux 可以提高可读性和可维护性，并允许您更轻松地对应用程序的性能进行调优。通过使用 Redux，您可以减少时间和努力，并在 React 中为您的应用程序创建更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6730e355eedcc8a97c93351a