用React Hooks + Stylus打造文艺范的Todo应用

当你用代码对抗生活的熵增，每一行都是诗

缘起：Todo应用的哲学意义

在程序员的世界里，Todo应用如同画家的素描本------它既是最基础的练习，也是思想的具象化。但这次，我不想再造一个平庸的任务管理器。我要用React Hooks的简洁和Stylus的优雅，打造一个文艺范的待办宇宙。

字体里的玄机：-apple-system的优雅

在global.styl的开篇，我写下这样一段：

stylus 复制代码

body
  font-family -apple-system, Arial, sans-serif

这行代码藏着移动端字体的优雅降级策略：

-apple-system 是苹果生态的魔法字体，它会自动调用San Francisco字体（苹果设备上最优雅的选择）
当用户离开苹果花园，优雅地降级到Arial
最后是通用的无衬线字体，确保所有设备都有体面的阅读体验

字体即气质------就像选择信纸的质地，它决定了应用的第一印象。

响应式设计的相对论：rem的哲学

stylus 复制代码

.app
  padding 2rem
  border-radius 0.5rem

这里藏着移动端适配的相对论：

rem 是根元素(html)字体大小的相对单位
当用户放大手机字体时，整个界面元素会和谐地等比缩放
告别死板的像素(px)，拥抱流动的界面

就像作家用相对词描述世界（"手掌般大小"而非"15厘米"），开发者用相对单位描述界面，才能适应多元的设备宇宙。

组件设计：代码世界的角色扮演

TodoForm - 沉默的创作者

这个组件像一位严谨的诗人：

它有语言的洁癖（自动trim空格）
它知道留白的艺术（提交后清空输入框）
它遵循十四行诗的格律（表单提交的规范）

jsx 复制代码

const handleSubmit = (e) => {
  e.preventDefault()
  let result = text.trim()
  if (!result) return; // 拒绝无意义的空白
  onAddTodo(result)
  setText('') // 创作后的归零
}

TodoItem - 三位一体的存在

每个任务项都是微型的圣三位一体：

jsx 复制代码

<input type="checkbox" onChange={onToggle} /> // 思想的开关
<span className={isCompleted ? 'completed' : ''}>{text}</span> // 灵魂的呈现
<button onClick={onDelete}>Delete</button> // 肉体的湮灭

当任务完成时，文字被轻轻划去，如同诗人修改手稿时的删除线------不是彻底的抹除，而是温柔的告别。

状态管理的禅意：Hooks之道

在Todos.jsx中，我领悟到状态管理的三种境界：

jsx 复制代码

// 第一境：创建
setTodos([...todos, { id: Date.now(), text, isCompleted: false }])

// 第二境：转化
todos.map(todo => todo.id === id ? 
  { ...todo, isCompleted: !todo.isCompleted } : todo)

// 第三境：放下
todos.filter(todo => todo.id !== id)

这像极了佛家三法印：诸行无常 （状态可变）、诸法无我 （不可变数据）、涅槃寂静（删除释然）。

Stylus：CSS世界的俳句大师

Stylus让样式表变成诗歌：

stylus 复制代码

.todo-item
  padding 0.5rem
  border-bottom 1px solid #ccc
  .completed
    text-decoration line-through
    color #aaa

省略了花括号、分号甚至冒号，如同俳句省略主语。每一行都是意象的堆叠：

0.5rem 是呼吸的节奏
1px solid #ccc 是天地分隔线
line-through 是墨迹未干的删除符

React vs Vue：东西方美学之争

在数据绑定的哲学上，React和 Vue展现出文化差异：

jsx 复制代码

// React 如东方水墨：留白与意境
<input
  value={text}
  onChange={e => setText(e.target.value)}
/>

// Vue 似西方油画：直接与饱满
<input v-model="text">

React像茶道，需要你亲手完成每个步骤；Vue像咖啡机，一键获得完美结果。前者让你感受过程的美，后者给你结果的甜。

尾声：待办事项的存在主义

"我们写Todo应用，不是为了管理任务，而是为了对抗宇宙的热寂。每一个被勾选的任务，都是对熵增的一次微小胜利。" ------ 某程序员在凌晨三点的顿悟

当我完成这个应用时，突然明白：那些未完成的任务列表，正是人类对抗时间无序性的证据。每个isCompleted: false都是可能性，每个line-through都是存在过的证明。

你的代码即你的哲学。这个文艺范的Todo应用，现在是我的存在主义宣言：

在useState的钩子里钩住流动的时间
用border-radius软化现实的棱角
借box-shadow给平淡的日子增添深度