React 是一个用于构建用户界面的 JavaScript 库，Redux 是一种 Flux 架构的实现，用于管理应用程序状态和行为的库。开发人员可以结合使用这两个库来创建高效且易于维护的 Web 应用程序。而可重用组件则是将 React 和 Redux 结合使用的一种模式，它们的设计目的是为了使组件更容易重用、维护和测试。
React 简介
React 是 Facebook 开发的一个用于构建 UI 的 JavaScript 库。使用 React，开发人员可以构建可复用的组件，这些组件包含自己的状态和行为。React 支持 JSX 语法，这种语法允许开发人员在 JavaScript 代码中嵌入 HTML 标记。
以下是一个使用 React 创建简单计数器应用程序的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
-------- ----------- -
-------------- - ---
-
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
------ ------- --------在这个示例中，Counter 组件使用 useState 钩子来管理其状态。该组件还定义了两个用于增加和减少计数器值的函数。在返回的 JSX 中，组件将 count 属性的值显示为标题，并在两个按钮上分别绑定 increment 和 decrement 函数。
Redux 简介
Redux 是一个 JavaScript 库，用于管理应用程序状态和行为。它是 Flux 架构的一种实现，通过一种单向数据流来控制应用程序的行为。
Redux 通过以下三个组件来管理应用程序状态：
- Store：包含应用程序状态的单一 JavaScript 对象。
- Action：描述应用程序中发生的事件的 JavaScript 对象。
- Reducer：捕捉 Action 并更新状态的函数。
以下是一个使用 Redux 创建简单计数器应用程序的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- ------
----- --------- - ------------
----- --------- - ------------
-------- ----------- -
------ - ----- --------- --
-
-------- ----------- -
------ - ----- --------- --
-
-- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ----------
------ ----- - --
---- ----------
------ ----- - --
--------
------ ------
-
-
-- -----
----- ----- - ----------------------------
------ ------- ------在这个示例中，counterReducer 函数通过一个 switch 语句来捕捉 INCREMENT 和 DECREMENT Action，并更新状态。应用程序使用 createStore 函数来创建 Store，并将 counterReducer 函数传递给 createStore。
React 和 Redux 的结合使用
将 React 和 Redux 结合使用可以创建更加复杂的应用程序，这些应用程序具有良好的可维护性和扩展性。
在 React 和 Redux 结合使用的过程中，可重用组件是一个重要的概念。组件可以是一个纯粹的展示组件，只负责显示数据，也可以是一个容器组件，负责管理应用程序状态。
以下是一个展示计数器值的可重用组件：
function CounterDisplay(props) {
return <h1>Count: {props.count}</h1>;
}
export default CounterDisplay;在这个组件中，我们只需要传递一个 count 属性即可展示计数器的值。
而以下是一个用于增加和减少计数器值的容器组件：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ----------------------------
------ -------------- ---- -------------------------------
-------- -------------- -
-------- ----------------- -
----------------------------
-
-------- ----------------- -
----------------------------
-
------ -
-----
--------------- ------------------- --
------- ------------------------------------
------- ------------------------------------
------
--
-
-------- ---------------------- -
------ -
------ --------------
--
-
------ ------- ----------------------------------在这个组件中，我们使用 connect 函数将 Counter 组件与 Redux Store 相关联。mapStateToProps 函数将 Store 中的状态映射到 Counter 的 props 中。每当用户单击增加或减少按钮时，组件将分别调度 increment 和 decrement Action。
结论
React、Redux 和可重用组件是构建高效且易于维护的 Web 应用程序的关键。学习如何使用这些库可以帮助开发人员实现更加复杂的应用程序，并提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6738693d317fbffedf1045a7