Reactjs 待办事项列表应用程序（使用 Vite 和 Condition）

构建 ReactJS 应用程序时，随着应用程序的扩展，有效地管理状态变得至关重要。 React 的内置状态管理非常适合小型应用程序，但对于更大或更复杂的应用程序，通常需要外部状态管理库。
Zustand 就是这样一个轻量级、快速且简约的状态管理库，它可以帮助您管理 React 应用程序中的全局状态，而不会增加太多复杂性。

在本博客中，我们将学习如何在使用 Vite 构建的简单待办事项列表应用程序中使用 Zusstand。

这是项目的工作：

Zustand 是什么？

Zustand 是一个小型、快速的 React 状态管理库。与 Redux 等其他状态管理库相比，它提供了更简单的 API，使其对于中小型应用程序更加用户友好。

为什么要Zustand？

• 简单性： Zustand 提供了一个简单且最小的 API 来处理状态。
• 性能： Zustand 仅在使用已更改的特定状态的组件中触发重新渲染。
• 无样板： 与 Redux 不同，Zustand 不需要减速器、操作或中间件来管理状态。

Zustand 和 Vite 入门

第1步：使用Vite创建一个新项目
首先，让我们使用 Vite 建立一个 React 项目，Vite 是一个快速且现代的构建工具。

# Create a new Vite project
npm create vite@latest todo-app-zustand --template react

然后在终端中执行以下步骤：

然后按照以下命令操作：

# Move into the project directory
cd todo-app-zustand

# Install dependencies
npm install

Vite 现在已经创建了一个样板 React 应用程序。您可以使用以下方式运行应用程序：

npm run dev

在浏览器中打开 http://localhost:5173 以查看新的 Vite 应用正在运行。

---

第 2 步：安装 Zustand
现在，让我们安装 Zustand 来管理待办事项列表应用程序的状态。

npm install zustand

---

第 3 步：设置 Zustand 进行状态管理

在 src 目录中创建一个名为 store 的新文件夹，并在其中添加一个文件 todoStore.js 。该文件将保存我们的 Zustand 商店。

// src/store/todoStore.js
import { create } from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],

  // Add a new todo
  addTodo: (todo) =>
    set((state) => ({
      todos: [...state.todos, { id: Date.now(), text: todo, completed: false }],
    })),

  // Remove a todo by ID
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((todo) => todo.id !== id),
    })),

  // Toggle a todo's completion status
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    })),
}));

export default useTodoStore;

• addTodo：将新的待办事项添加到列表中。
• removeTodo：通过其唯一的 id 删除待办事项。
• toggleTodo：切换待办事项的完成状态。

---

第 4 步：创建 Todo 列表组件
现在，我们将创建一个与 Zustand 状态交互的 TodoList 组件。

// src/components/TodoList.jsx
import React, { useState } from 'react';
import useTodoStore from '../store/todoStore';

const TodoList = () => {
  const { todos, addTodo, removeTodo, toggleTodo } = useTodoStore();
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      addTodo(newTodo);
      setNewTodo(''); // Clear the input after adding
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={handleAddTodo}>Add</button>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
                cursor: 'pointer',
              }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

在这里，我们使用 useTodoStore 钩子来：

• 获取待办事项列表。
• 添加新待办事项。
• 切换待办事项的完成状态。
• 删除待办事项

---

第 5 步：将 TodoList 组件添加到应用程序
现在，我们需要将 TodoList 组件添加到主 App.jsx 文件中。

// src/App.jsx
import React from 'react';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

---

第 6 步：造型（可选）
您可以选择使用您喜欢的 CSS 框架设计您的应用程序，甚至安装和使用 Tailwind CSS 或 Bootstrap。

为了简单起见，我们直接在index.css中添加一些基本样式。

/* src/index.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
  background: #ff4757;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}

input {
  margin-right: 10px;
  padding: 5px;
  width: 300px;
}

---

第 7 步：运行您的应用程序
使用以下命令运行应用程序：

npm run dev

您现在应该看到一个功能性的待办事项列表，您可以在其中：

• 添加新待办事项。
• 通过点击待办事项将其标记为已完成或未完成。
• 删除待办事项。

结论：
在本教程中，我们使用 React 和 Zustand 构建了一个 简单的待办事项列表应用程序进行状态管理。

• Zustand 的简单性和性能使其成为管理中小型应用程序状态的绝佳选择。
• 与 Redux 等其他状态管理解决方案相比，它需要的样板要少得多。
• 通过使用 Zustand，您可以专注于构建应用程序逻辑，而不必担心管理不必要的复杂性。

这就是本博客的全部内容了！请继续关注更多更新并继续构建令人惊叹的应用程序！ ?✨
快乐编码！ ？

以上是Reactjs 待办事项列表应用程序（使用 Vite 和 Condition）的详细内容。更多信息请关注PHP中文网其他相关文章！