React 和 Redux 是现代前端开发必学的技术，React 是一个用于构建用户界面的 JavaScript 库，而 Redux 一般与 React 结合使用，是一个用于管理应用程序状态的库。本篇文章将详细介绍 React 和 Redux 的基本概念、使用方式和注意事项，并提供相应的示例代码，希望能为初学者提供指导。
React 基础
React 的思想是将 UI 分成独立的组件，每个组件封装自己的代码和状态，而组件之间可以相互嵌套和调用，从而构建整个用户界面。React 采用了 Virtual DOM 技术，在数据更新时只更新需要更新的部分，大大提高了渲染效率。
JSX 语法
JSX 是 React 推荐采用的语法，它是一种 JavaScript 的扩展语法，可以在 JavaScript 中直接写 HTML 代码。例如：
----- ------- - ---------- ------------
在 JSX 中，可以使用大括号 {} 来进行嵌入 JavaScript 代码，例如：
----- -------- - -------- ----- ------- - ---------- -----------------
组件定义
React 组件可以是函数组件或类组件，本文介绍类组件的定义方式，一个简单的类组件示例：
----- -------- ------- --------------- -
-------- -
----- - ---- - - -----------
------ ---------- -------------
-
-
----------------
--------- ------------ ---
-------------------------------
--在类组件中，必须定义 render 方法，该方法返回用于渲染组件的 JSX 代码。在 render 方法中，可以通过 this.props 访问传入组件的属性，例如上例中的 name 属性。
组件状态
React 的组件状态是指组件的内部数据，可以通过 this.state 访问。组件状态的更新必须通过调用 this.setState(newState) 方法来实现，例如：
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
---------- -----------------------
------- ----------------------------------------------
------
--
-
-
----------------
-------- ---
-------------------------------
--在上述代码中，Counter 组件定义了一个 count 状态，通过 increment 方法来实现状态的更新，并在 render 方法中渲染状态信息。需要注意的是，在事件处理函数中，需要通过 bind 方法来将 this 上下文绑定到当前组件，否则无法访问组件的状态和方法。
Redux 基础
Redux 是一个用于管理应用程序状态的库，将应用状态存储在一个全局变量中，称为 Redux Store，通过定义和触发 Action 来更新状态，通过订阅 Store 来监听状态的变化。
Store 定义
在 Redux 中，需要先定义应用程序的初始状态，然后定义 reducers 来处理各种 Action，最后通过 Redux 的 createStore 方法创建 Store，例如：
----- ------------ - -
------ -
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ----------------------------------在上述代码中，定义了一个名为 counterReducer 的 reducer 函数，用于处理 INCREMENT 和 DECREMENT 两种 Action，然后通过 createStore 方法创建了一个名为 store 的全局变量，用于存储应用程序状态。
Action 定义
Action 是用于描述应用程序状态变化的对象，它包含一个 type 属性和一些描述信息，例如：
----- --------------- - - ----- ----------- -- ----- --------------- - - ----- ----------- --
在上述代码中，定义了两个 Action 分别对应 INCREMENT 和 DECREMENT 两种状态变化。
触发 Action
在触发 Action 时，需要调用 Redux Store 的 dispatch 方法，例如：
-------------------------------- -------------------------------- --------------------------------
在上述代码中，使用 store.dispatch 分别触发了两次 INCREMENT 和一次 DECREMENT Action，从而导致应用程序状态的变化。
订阅 Store
在订阅 Store 时，需要使用 subscribe 方法来监听 Store 的状态变化，例如：
------------------ -- - ----- ----- - ----------------- ------------------- ----------------- ---
在上述代码中，使用 store.subscribe 方法监听 Store 状态变化，每当应用程序状态变化时，通过 getStore 方法获取最新状态并输出。
React 和 Redux 结合
在使用 React 和 Redux 结合时，需要使用 Redux 提供的 Provider 和 connect 方法来实现。Provider 是一个 React 组件，用于将 Redux Store 传递给整个应用程序，connect 是一个用于连接 React 组件和 Redux Store 的方法。
Provider 注入
在应用程序的顶层组件中，使用 Provider 组件将 Redux Store 传递给所有子组件，例如：
----------------
--------------- --------------
---- --
------------------
-------------------------------
--在上述代码中，App 组件是整个应用的顶层组件，使用 Provider 将 store 传递给 App 组件，从而使得所有子组件都可以访问该 Store。
connect 连接
在连接 React 组件和 Redux Store 时，需要使用 connect 方法实现。该方法直接调用会返回一个新的函数，这个函数再接收一个组件作为参数，返回一个新的组件。新的组件会将需要的状态和方法作为属性传递给原始组件，例如：
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
-
----- ---------------- - --------------
------- -- -- ------ ----------- ---
- ---------- ---------------- ---------- --------------- -
-----------
----------------
--------------- --------------
----------------- --
------------------
-------------------------------
--在上述代码中，使用 connect 方法连接了 Counter 组件和 store，通过传入一个函数 state => ({ count: state.count }) 将应用程序的状态 count 作为 Counter 组件的属性传递，通过传入一个对象 { increment: incrementAction, decrement: decrementAction } 将需要调用的 Action 传递给 Counter 组件的方法，从而在 Counter 组件中使用 this.props.count 和 this.props.increment() 访问应用程序状态和处理状态变化。注意，在 connect 方法中使用了一种简洁的写法 { increment: incrementAction, decrement: decrementAction } 等价于 { increment: () => dispatch(incrementAction), decrement: () => dispatch(decrementAction) }。
结论
React 和 Redux 是现代前端开发必学的技术，React 提供高效的 Virtual DOM 渲染机制和组件化思想，Redux 提供统一的状态管理机制和数据流控制。在实际开发中，需要掌握 JSX 语法、组件定义、组件状态和事件处理等 React 基础知识，以及 Store 定义、Action 定义、触发 Action 和订阅 Store 等 Redux 基础知识，最终通过 Provider 和 connect 方法将 React 组件和 Redux Store 连接起来，构建出高效可控的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670fae505f55128102669a10