React 和 Redux 是目前前端开发中最流行和最广泛使用的框架和库之一。对于初学者来说，掌握它们可以帮助建立可扩展和易于维护的 Web 应用程序。
React 简介
React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 在2011 年开发， 它允许您将应用程序分解成可重用的组件，这些组件可以协作构建复杂的 UI。React 也被称为“V（视图）”部分，因为它专注于构建 UI 元素并确保组件渲染的完整性。
React 主要由以下几个核心概念组成：
1. 组件
在 React 中，UI 是由组件构成的。 组件是独立、可重用的代码单元，每个组件只负责一个小任务。
例如，一个名为 Button 的组件可以渲染一个按钮，一个名为 TextInput 的组件可以处理文本输入。
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------------- - ------ ------- ----------------------------------------------- - -------- ---------------- - ------ ------ ----------- ------------------- ------------------------- --- -
2. 属性（Props）
组件可以接受来自父组件的属性。这些属性可以是任何类型的数据或回调函数，它们提供传递信息，并作为组件“输入”数据。
function MyComponent(props) {
return <div>{props.title}</div>;
}
<MyComponent title="Welcome to my app!" />3. 状态（State）
组件还可以拥有自己的状态（State），可以用来在运行时控制组件行为。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------------- -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
---------- ------------
------- ----------------------------------------
------
--
-Redux 简介
Redux 是一个 JavaScript 库，用于管理应用程序的状态。它提供了一种可预测的状态管理方式，避免了难以调试的多个全局变量和难以理解的回调函数。
Redux 由以下三个核心概念组成：
1. Store
Redux 应用程序的完整状态被存储在一个单一的对象中，称为 Store。它是状态的唯一来源，我们可以使用函数来更新状态。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------2. Action
在 Redux 中，Action 定义了要对 Store 执行的操作。它们是一个简单的对象，其中一个必需的键是 type（指示要执行的操作）。其余的键取决于特定操作的需求。
const incrementAction = {
type: 'INCREMENT',
};
const decrementAction = {
type: 'DECREMENT',
};3. 派发（Dispatch）
派发是向 Redux Store 发送操作的过程。它通过调用 store.dispatch() 实现。
function handleIncrementClick() {
store.dispatch({ type: 'INCREMENT' });
}
function handleDecrementClick() {
store.dispatch({ type: 'DECREMENT' });
}Redux 和 React 的集成
现在我们知道了 React 和 Redux 都是什么，让我们看看它们如何一起工作。
React 组件可以访问 Store 的状态，并在状态发生变化时自动更新。
通过将 Store 提供给组件的根，我们可以与 Store 建立联系，并通过 React 的 context 机制使所有组件能够访问 Store。
-- -------------------- ---- -------
------ - -------- - ---- --------------
----- ----- - ---------------------
-------- ----- -
------ -
--------- --------------
-------- --
-----------
--
-
-------- -------------- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- ----------- - -- -- -
---------- ----- ----------- ---
--
------ -
-----
---------- ------------
------- ----------------------------------------
------
--
-示例代码
这是一个简单的 Todo 应用程序，它使用了 React 和 Redux 来存储和管理应用程序的状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------------ ----------- - ---- --------------
----- ------------ - -
------ ---
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ - ------ ---------------- --------------- --
--------
------ ------
-
-
----- ----- - ---------------------
-------- ----- -
------ -
--------- --------------
--------- --
-----------
--
-
-------- --------------- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- ------------ - ------- -- -
-----------------------
----- ---- - ---------------------------------
---------- ----- ----------- -------- ---- ---
---------------------
--
------ -
-----
----- ------------------------
------ ----------- ----------- --
------- --------------------------
-------
----
----------------- -- -
--- ----------------------
---
-----
------
--
-结论
在本指南中，我们介绍了 React 和 Redux 的基本概念，以及如何将它们结合使用。
React 可以帮助我们构建可重用和可扩展的组件，它强调 UI 元素和组件的渲染，而 Redux 以一种可预测的方式存储和管理应用程序的状态。
随着您对 React 和 Redux 框架和库的熟练程度不断提高，您将能够构建出更为复杂和高效的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675190308bd460d3ad8ac3ea