React 和 Redux 是目前最流行的前端框架和状态管理器，也是很多公司招聘前端工程师的必备技能。本文将介绍 React 和 Redux 的三大核心概念，包括组件、Props 和 State、Redux Store 和 Reducer，以及它们的使用方法和实际应用。
组件、Props 和 State
React 的核心概念是组件，它可以是一个简单的按钮或者是一个复杂的表单，它们可以被嵌套在一起形成一个完整的应用程序。组件可以接受一些参数，称为 Props，这些参数可以用来控制组件的行为和样式。例如，一个按钮组件可以接受 Props 来定义按钮的文本和样式。
组件还有一个重要的概念，称为 State，它是组件内部的状态。State 可以用来存储组件的数据和状态，例如一个表单组件可以用 State 存储用户输入的数据。当 State 发生变化时，组件会重新渲染，从而更新界面。
下面是一个简单的组件示例，它接受 Props 和 State 并将它们渲染为一个按钮：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------ ------- --------------- - ------------------ - ------------- ---------- - - ------ -- -- - ----------- - -- -- - --------------- ------ ---------------- - - --- -- -------- - ----- - ----- ----- - - ----------- ----- - ----- - - ----------- ------ - ------- ------------- --------------------------- ------ --------- --------- -- - - ------ ------- -------展开代码
Redux Store 和 Reducer
Redux 是一个状态管理器，它可以用来管理整个应用程序的状态。Redux 的核心概念是 Store 和 Reducer。
Store 是一个包含整个应用程序状态的对象，它可以被读取和更改。Redux 中的 State 是不可变的，因此每次更改 State 都必须返回一个新的 State 对象。这可以通过 Reducer 函数来实现。
Reducer 接受当前的 State 和一个 Action，返回一个新的 State。Action 是一个描述 State 更改的对象，它通常包含一个类型和一些数据。Reducer 根据 Action 的类型来更新 State，然后返回一个新的 State。
下面是一个简单的 Redux Store 和 Reducer 示例，它存储一个计数器的值：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- -- -- ------ -- ----- --------- - ------------ ----- --------- - ------------ -- -- ------- -------- -------------------- - - ------ - -- ------- - ------ ------------- - ---- ---------- ------ - ------ ----------- - - -- ---- ---------- ------ - ------ ----------- - - -- -------- ------ ------ - - -- -- ----- ----- ----- - ---------------------------- -- -- ----- -- ------------------ -- - ------------------------------ --- -- -- ------ ---------------- ----- --------- --- ---------------- ----- --------- --- ---------------- ----- --------- ---展开代码
实际应用
React 和 Redux 的组合可以用来构建复杂的应用程序。下面是一个简单的 Todo List 应用程序示例，它演示了如何使用 React 和 Redux。
首先，我们需要定义 Todo List 的 State，它包含一个 Todo 列表和一个输入框的值：
const initialState = { todos: [], input: '', };
然后，我们需要定义 Action 类型和 Action Creator 函数：
-- -------------------- ---- ------- ----- -------- - ----------- ----- ------------ - --------------- -------- ------------------- - ------ - ----- --------- -------- - ---- - -- - -------- ----------------------- - ------ - ----- ------------- -------- - ---- - -- -展开代码
接下来，我们需要定义 Reducer 函数来处理这些 Action：
-- -------------------- ---- ------- -------- ----------------- - ------------- ------- - ------ ------------- - ---- --------- ------ - --------- ------ ---------------- - ----- ------------------- --- ------ --- -- ---- ------------- ------ - --------- ------ -------------------- -- -------- ------ ------ - -展开代码
然后，我们需要创建 Redux Store 并将 Reducer 传入：
const store = createStore(todoReducer);
现在，我们可以将 TodoList 组件连接到 Redux Store 并使用 Props 和 State：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - -------------- ----------------- - ---- ------------ ----- -------- ------- --------------- - ------------- - -- -- - ----- - ------ ------- - - ----------- --------------- -- ----------------- - ------- -- - ----- - ----------- - - ----------- -------------------------------- -- -------- - ----- - ------ ----- - - ----------- ------ - ----- ---- ----------------- ------ -- - --- ---------------------------- --- ----- ------ ------------- --------------------------------- -- ------- ----------------------------------------- ------ -- - - -------- ---------------------- - ------ - ------ ------------ ------ ------------ -- - -------- ---------------------------- - ------ - -------- ------ -- ------------------------------ ------------ ------ -- ---------------------------------- -- - ------ ------- ------------------------ ------------------------------展开代码
最后，我们需要将 TodoList 组件渲染到页面上：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ -------- ---- ------------- ------ ----- ---- ---------- ---------------- --------- -------------- --------- -- ------------ ------------------------------- --展开代码
现在，我们已经学会了 React 和 Redux 的三大核心概念，并且可以用它们来构建复杂的应用程序。在实践中，我们还需要学习更多的技术，例如 React Router、Redux Thunk 等，以及最佳实践和性能优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d54430a941bf71349bb9a5
