React 是一款高效且易于维护的前端框架，它使开发者能够快速构建出优秀的单页应用（SPA）。然而，在深度嵌套的组件树中，即便只有一处的状态变化也会导致整个组件树的重新渲染，这会降低应用的性能。为了解决这个问题，我们可以使用 Redux 来管理应用的状态。
为什么使用 Redux
在 React 应用中，当我们需要让组件之间共享状态时，常常会使用 React 的上下文 (Context) API 或 props。然而，这种方式存在一个问题：当某个子组件的状态变化时，它的所有父组件和兄弟组件都会重新渲染。这会导致大量的不必要的 DOM 操作和 JavaScript 运算，进而影响应用的性能。
Redux 提供了一种解决方案：将组件中的状态提取到统一的状态库中，使得状态更加可控。这样，只有真正发生变化的状态才会导致组件的重新渲染。同时，Redux 还提供了强大的调试工具，可以简化开发人员的调试流程。
Redux 的核心概念
在使用 Redux 之前，需要了解一些核心概念。
Store
Store 是应用的状态库，它是 JavaScript 对象。Store 中存储了整个应用的状态，它通过 Reducer 来管理状态的变化。
Reducer
Reducer 是一种纯函数，它接收当前状态和指定的 action，返回新的状态。在 Redux 应用中，Reducer 负责管理应用的状态变化。本质上，Reducer 就是一个状态机，它遵循一定的规则，根据当前状态和指定的 action 计算新的状态。
Action
Action 是状态变化的唯一来源。它是一个简单的 JavaScript 对象，它必须包含一个 type 属性，用于描述动作的类型。其他属性可以根据需要指定。
Dispatch
Dispatch 是触发状态变化的方式，它会向 Reducer 发送指定的 action。Store 会根据 action 自动调用 Reducer 来计算新的状态。
Subscribe
Subscribe 用于监听 Store 中状态的变化。每当 Store 中的状态发生变化时，subscribe 会自动执行相应的回调函数。
示例代码
以下代码展示了如何使用 Redux 来实现优化 React 组件的多次渲染问题。
安装依赖
首先，我们需要安装 Redux 和 React-Redux。
npm install --save redux npm install --save react-redux
创建 Redux 应用
在创建 Redux 应用之前，我们需要先定义应用的初始状态和 Reducer。
-- -------------------- ---- -------
-- -- ------
----- ------------ - -
------ --
--
-- -- -- -------
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-在这个示例中，我们定义了一个初始状态，其中只有一个 count 属性。然后，我们定义了一个 Reducer，它会根据 action 来更新状态，如果没有匹配到任何 action，则返回原始的状态。
现在，我们可以使用 Redux 的 createStore 函数来创建一个新的 Store。
import { createStore } from 'redux';
const store = createStore(reducer);创建 React 组件
接下来，我们创建一个 React 组件，它会从 Store 中提取状态，并将状态传递给子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
------ ------- ------------------------ -----------------------------在这个组件中，我们使用 Redux 的 connect 函数来将组件和 Store 连接起来。mapStateToProps 函数用于从 Store 中提取需要的状态，mapDispatchToProps 函数用于定义 dispatch 方法，用于触发状态变化。
这个组件中，通过 this.props.count 获取 count 属性，通过 this.props.increment 和 this.props.decrement 调用 dispatch 函数。
在应用中使用组件
现在，我们可以将 Counter 组件添加到应用中，它会根据状态的变化来实时更新 UI。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ------- ---- ------------
------ ----- ---- ----------
----------------
--------- --------------
-------- --
------------
-------------------------------
--在这个示例中，我们使用 React 的 Provider 组件将 Store 传递给 Counter 组件。这样，Counter 组件就可以访问 Store 中的状态了。
总结
Redux 提供了一种可靠的方式来管理应用的状态，它可以大大提高应用的性能和可维护性。通过使用 Redux，我们可以将组件中的状态提取到一个全局状态库中，从而减少组件的重新渲染。同时，Redux 还提供了丰富的调试工具，帮助开发人员快速定位问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ca76a968c7c53b0f1475d