React 初学者的完整指南：揭开 React 和 Redux 神秘面纱

前端

2023-11-04 20:39:06

React，一个风靡全球的 JavaScript 库，以其卓越的性能、简洁的语法以及组件化架构而备受推崇。对于前端开发人员而言，学习 React 是必不可少的，它可以帮助您创建动态且交互性强的 Web 应用程序。

然而，React 本身并不包含状态管理功能。为了解决这个问题，Redux 应运而生，它是一个流行的库，可通过提供集中式状态管理来补充 React。通过使用 Redux，您可以轻松管理应用程序状态，使其在整个应用程序中始终保持同步和一致。

React 的基础

React 采用组件化的方法，将复杂的应用程序分解为更小的、可重用的组件。每个组件都有其自己的状态和行为，可以独立于其他组件进行开发和维护。

React 的核心概念包括：

组件： 应用程序的基本构建块，表示用户界面的一部分。
状态： 组件中可变的数据，决定了其外观和行为。
道具： 从父组件传递到子组件的不可变数据。
生命周期： 一系列钩子函数，允许您在组件的不同阶段执行特定任务。

Redux 的原理

Redux 是一个基于 Flux 架构的状态管理库。它将应用程序状态存储在集中式存储中，称为“仓库”。所有组件都可以访问仓库，并通过称为“操作”的不变对象来更新状态。

Redux 的主要优点包括：

单一事实来源： 应用程序状态被保存在一个中心位置，消除了数据不一致的风险。
可预测性： 通过使用纯函数操作，Redux 确保了状态的每次更改都是可预测且可重复的。
调试简便： Redux 的时间旅行功能使您可以轻松调试应用程序并找出错误。

React 和 Redux 的结合

React 和 Redux 完美结合，为构建复杂且可维护的 Web 应用程序提供了强大的工具。React 负责管理用户界面，而 Redux 则负责管理应用程序状态。

将 React 和 Redux 集成到您的项目中非常简单：

在您的 React 应用程序中安装 Redux 库。
创建一个 Redux 存储，它将保存您的应用程序状态。
使用 React-Redux 绑定库，它将 Redux 连接到您的 React 组件。

示例项目

为了更好地理解 React 和 Redux，让我们创建一个简单的示例项目。我们将创建一个待办事项列表应用程序，允许用户添加、删除和标记待办事项为已完成。

代码示例：

React 组件：

import React, { useState } from 'react';

const TodoItem = ({ todo, onDelete, onToggle }) => {
  return (
    <li>
      <input type="checkbox" checked={todo.completed} onChange={onToggle} />
      <span>{todo.text}</span>
      <button onClick={onDelete}>Delete</button>
    </li>
  );
};

Redux 操作：

const ADD_TODO = 'ADD_TODO';
const DELETE_TODO = 'DELETE_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

export const addTodo = (text) => ({
  type: ADD_TODO,
  payload: { text },
});

export const deleteTodo = (id) => ({
  type: DELETE_TODO,
  payload: { id },
});

export const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  payload: { id },
});

Redux 仓库：

import { createStore } from 'redux';

const initialState = {
  todos: [],
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    default:
      return state;
  }
};

export const store = createStore(todoReducer);

将 React 和 Redux 连接起来：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);