React 看板项目实战

学习目标

进入项目课。这一课不教新知识点,而是带你把 p1-task-board(React 任务看板)从需求变成可提交的成果:完成需求拆解与里程碑规划,理解状态模型与组件边界的关键决策,并按验收清单完成提交——可运行结果、组件设计说明、状态模型说明三件齐。

问题场景

单独的知识点都练过了,拼成一个完整应用时问题全冒出来:三列看板的状态该放哪、拖拽和按钮移动怎么选、持久化什么时候写、空列和超长标题这些边角什么时候处理。项目课的意义:在真实的「需求 → 拆解 → 决策 → 验收」流程里,把这些缝一次缝好。

核心解释

**项目说明:先读需求,再动手。**到 /projects 页找到「React 任务看板(p1-task-board)」,通读需求与验收标准。它是一个三列看板(待办 / 进行中 / 已完成),核心能力:任务的新建、编辑、删除;任务在列间移动(拖拽为增强,按钮为兜底);按标签或优先级筛选;本地持久化,刷新后数据完整。动手任务全部指向该项目的里程碑,本课正文负责拆解与决策讲解。

里程碑拆解:每个里程碑结束都有可运行、可演示的产物:

里程碑	交付	验收断言
m1 静态三列	列 + 任务卡只读渲染	三列正确分组,空列有占位提示
m2 增删改	新建、编辑、删除任务	操作后列表与表单一致,取消不落库
m3 移动任务	按钮移动 + 拖拽增强	移动后分组正确,刷新仍在原列
m4 筛选与持久化	标签筛选 + localStorage	筛选互不干扰,刷新后数据完整
m5 边界与验收	完整走查	验收清单全绿

**关键决策一:任务单一数组,列是派生。**新手常给每列一个独立数组——移动任务就变成「从 A 数组删、往 B 数组加」两步操作,中断即丢数据。正确形态是只有一个 tasks 数组,列是过滤结果:

const [tasks, setTasks] = useState(initialTasks);
const byLane = (lane) => tasks.filter((t) => t.lane === lane);
function moveTask(id, lane) {
  setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, lane } : t)));
}

一个字段的改动,所有列自动正确——这是派生状态的直接应用,也是整个项目最重要的一个决策。

**关键决策二:持久化写后即存。**在每个修改动作里显式保存,而不是依赖渲染副作用定时同步:

function addTask(task) {
  const next = [...tasks, task];
  setTasks(next);
  persist(next); // 动作发生时保存,不写未保存的中间态
}

应用启动时读取存档并做形状校验:版本不对、字段缺失就回退初始数据——坏数据宁可丢弃,不能崩溃。

**关键决策三:交互降级路径。**拖拽是增强,不是唯一路径:每张卡必须有「左移 / 右移」按钮等价操作,同时满足键盘与触屏用户;拖拽失败(指针事件中断、兼容问题)不影响核心流程。组件边界随之确定:Board 持有状态,Column 接收派生列表,TaskCard 无状态展示加回调——「移动任务」只需要改 Board 里的一个函数。

示例拆解

实验区是看板核心链路的预演:三列渲染、新建任务、左右移动、标签筛选、localStorage 持久化。它刻意做得小——预演的目的是把「任务单源 + 派生列 + 移动即改字段」这条主干在正式动工前跑通。对照实验区代码核对三件事:byLane 是否纯派生、moveTask 是否单点修改、筛选状态是否独立于任务数据(状态分类在这里落地)。

动手任务

正式任务在 /projects 页的「React 任务看板(p1-task-board)」:

1. 按 m1 → m2 → m3 的顺序完成前三个里程碑,每个里程碑结束时记录一次可运行状态(commit 或截图)。
2. 用本课的决策讲解自查:任务数据是否单源、列是否派生、持久化是否写后即存;发现偏差先改结构再继续加功能。
3. 完成 m4、m5:跑完整验收清单——空列占位、60 字长标题不破版、连续快速移动 10 次数据一致、刷新后完整恢复、全程键盘可操作;提交三件套(可运行结果、组件设计说明、状态模型说明)。

常见错误

• 先做拖拽再做核心:数据模型和增删改不稳就上拖拽,返工率最高;按里程碑顺序。
• 一列一个数组:移动 = 双数组手术,一致性靠人肉;单源 + 派生。
• 持久化挂在渲染副作用上:写入时机与具体动作脱钩,容易把未保存的中间态写进去;在动作函数里显式存。
• 验收只测自己的操作路径:换一双手、换键盘走一遍,边角问题全出来。

检查与复盘

自查清单:

• 每个里程碑都有可运行产物与记录
• 三项关键决策(单源派生 / 写后即存 / 交互降级)能在代码里指出对应实现
• 提交物三件齐:可运行结果、组件设计说明、状态模型说明

参考资料

• React 官方文档:Thinking in React —— 从需求到组件树的拆解方法
• React 官方文档:管理状态 —— 状态模型决策的完整框架
• React 官方文档:状态保留与重置 —— 列表增删移动时状态不串位