构建 ReactJS 应用程序时，随着应用程序的扩展，有效地管理状态变得至关重要。 React 的内置状态管理非常适合小型应用程序，但对于更大或更复杂的应用程序，通常需要外部状态管理库。
Zustand 就是这样一个轻量级、快速且简约的状态管理库，它可以帮助您管理 React 应用程序中的全局状态，而不会增加太多复杂性。
在本博客中，我们将学习如何在使用 Vite 构建的简单待办事项列表应用程序中使用 Zusstand。
这是项目的工作：
Zustand 是一个小型、快速的 React 状态管理库。与 Redux 等其他状态管理库相比，它提供了更简单的 API，使其对于中小型应用程序更加用户友好。
为什么要Zustand？
第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;
第 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 构建了一个 简单的待办事项列表应用程序进行状态管理。
这就是本博客的全部内容了！请继续关注更多更新并继续构建令人惊叹的应用程序！ ?✨
快乐编码！ ？
以上是Reactjs 待办事项列表应用程序（使用 Vite 和 Condition）的详细内容。更多信息请关注PHP中文网其他相关文章！
