待办应用

Source: Dev.to

介绍

在完成我的第一个侧重逻辑的项目（Counters）后，我想在复杂度上迈出下一步——不是通过改进 UI，而是挑战我的思考方式。

于是我开始了 项目 2：Todo 应用（逻辑优先，而非 UI）。

为什么是 Todo 应用？

Counters 让我理解了单值状态的逻辑。Todo 应用则迫使你以以下方式思考：

• 使用数组而不是单个值
• CRUD 操作（添加、更新、删除）
• 条件渲染
• 边界情况和状态一致性

这正是许多 React 学习者开始卡壳的地方——因此它是提升的绝佳切入点。

本项目的目标不是打造华丽的界面，而是强化我的问题解决思路，编写可预测的状态更新，并处理几乎所有前端应用都会遇到的真实业务逻辑场景。

在本文中，我将逐步拆解我是如何实现 Todo 应用的，阐述我的逻辑决策、遇到的错误以及从中学到的经验。

分层开发 🚀

第 1 级：添加 Todo 创建并进行校验

提交信息： Level 1: Add todo creation with validation

import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  const handleSubmit = () => {
    // Basic validation – prevent empty or whitespace‑only tasks
    if (task.trim() === "") {
      alert("Enter task to add");
      return;
    }

    // Immutable update – create a new array with the new task
    setTodos([...todos, task]);

    // Reset input for better UX
    setTask("");
  };

  return (
    
       setTask(e.target.value)}
        className="border rounded px-2 py-2 w-80 m-2"
      />
      
        Add Task
      

      {/* Render the list of todos */}
      {todos.map((todo, idx) => (
        {todo}
      ))}
    
  );
}

学到的内容

• 受控输入 – 使用 useState 管理表单输入，使输入值完全受 React 状态控制。
• 基础校验 – 防止添加空白或仅包含空格的 Todo，确保数据干净。
• 不可变状态更新（数组） – 使用展开运算符 ([...todos, task]) 创建新数组，而不是直接修改原数组，遵循 React 的不可变性原则，保证正确的重新渲染。
• 重置输入提升用户体验 – 在添加 Todo 后通过 setTask("") 清空输入框。
• 渲染动态列表 – 利用 map() 动态渲染 Todo 列表。