面试官爱问的Todoist完整示例：3步吃透任务管理核心逻辑

看了一堆教程还是不会写项目？别慌，大多数开发者卡在“懂语法”和“能落地”之间。今天这篇【面试突击】不整虚的，直接拆解 Todoist 这类任务管理系统的核心考点。我准备了基于官方源码仓库逻辑的完整示例，带你从数据结构到业务逻辑，把面试官想听的标准答案揉碎了喂给你。

考点梳理：面试官到底在考什么？

很多人以为 Todoist 就是个简单的增删改查（CRUD），那就大错特错了。在资深大厂面试中，Todoist 只是一个载体，背后考察的是状态管理、数据一致性以及复杂业务逻辑的处理能力。

核心考点集中在三个维度：

数据模型设计：任务（Task）、项目（Project）、标签（Label）之间的关系。是单向依赖还是多对多？如何设计数据库表结构才能既满足查询性能，又保持扩展性？
状态同步机制：前端操作后，后端如何保证数据最终一致性？如果用户断网操作，本地缓存与服务端数据冲突如何解决？
性能优化：当任务列表达到万级规模时，前端如何渲染？后端如何分页？

这里必须强调一个细节：Todoist 的官方源码仓库（虽然 Todoist 本身不开源前端核心，但其 API 文档和开源客户端如 todoist-rest 提供了极佳参考）展示了极高的 API 设计规范。面试中若能提到“参考官方 API 的资源化设计思路”，会极大提升你的专业度。

标准答法：如何回答“设计一个 Todoist 系统”？

面对这个问题，切忌上来就画 UML 图。面试官想看的是你的思考过程。

第一步：明确边界与核心实体。 “我会先确认业务边界。假设是一个个人任务管理工具，核心实体包括 User、Project、Task、Section。其中 Task 是核心，它依赖于 Project 和 Section，同时可以拥有多个 Label。”

第二步：阐述数据流与状态管理。 “前端采用 Redux 或 Zustand 进行状态管理。关键点在于乐观更新（Optimistic Update）。用户点击完成时，前端立即修改 UI 状态，同时发送请求。若请求失败，再回滚状态。这保证了用户体验的流畅性。”

第三步：数据库与后端逻辑。 “后端采用 PostgreSQL。Task 表设计时，due_date 使用 Timestamp 类型以支持时区，completed 使用 Boolean 或 completed_at 时间戳。为了支持多对多的 Label 关系，建立中间表 task_labels。查询时，通过 GIN 索引加速标签过滤。”

第四步：安全与并发。 “使用 JWT 进行鉴权。对于并发修改同一任务的情况，引入 version 字段进行乐观锁控制，避免脏写。”

这套答法，逻辑清晰，覆盖了前端体验、后端存储、数据一致性三大痛点，是标准的“高分答案”。

代码实现：基于 React + TypeScript 的核心逻辑

光说不练假把式。下面是一个简化版的 Todoist 核心任务管理模块，展示了乐观更新与错误回滚的完整实现。这是面试白板题的高频场景。

import { useState, useCallback } from 'react';
import { Task, TaskStatus } from './types';// 模拟 API 请求
const mockApi = {updateTask: (id: string, status: TaskStatus): Promise<void> => {return new Promise((resolve, reject) => {// 模拟 10% 的网络失败率，用于测试回滚逻辑if (Math.random() < 0.1) {setTimeout(() => reject(new Error('Network Error')), 500);} else {setTimeout(() => resolve(), 300);}});}
};export function useTodoistLogic(initialTasks: Task[]) {const [tasks, setTasks] = useState<Task[]>(initialTasks);const [loadingIds, setLoadingIds] = useState<Set<string>>(new Set());// 核心：乐观更新逻辑const toggleTask = useCallback(async (id: string) => {// 1. 找到当前任务const targetTask = tasks.find(t => t.id === id);if (!targetTask) return;// 2. 保存旧状态（用于失败回滚）const oldStatus = targetTask.status;// 3. 计算新状态const newStatus: TaskStatus = oldStatus === 'completed' ? 'pending' : 'completed';// 4. 乐观更新 UI：立即改变本地状态setTasks(prevTasks => prevTasks.map(task => task.id === id ? { ...task, status: newStatus } : task));// 5. 标记加载中setLoadingIds(prev => new Set(prev).add(id));try {// 6. 发送请求到后端await mockApi.updateTask(id, newStatus);// 7. 成功：无需额外操作，UI 已是最新console.log(`Task ${id} updated successfully to ${newStatus}`);} catch (error) {// 8. 失败：回滚 UI 状态console.error('Update failed, rolling back:', error);setTasks(prevTasks => prevTasks.map(task => task.id === id ? { ...task, status: oldStatus } : task));// 此处可集成 Toast 通知用户} finally {// 9. 移除加载标记setLoadingIds(prev => {const newSet = new Set(prev);newSet.delete(id);return newSet;});}}, [tasks]);return { tasks, toggleTask, loadingIds };
}

代码解析：

setTasks 不可变性：使用 map 创建新数组和新对象，确保 React 能检测到状态变化并重新渲染。
loadingIds 集合：使用 Set 而不是数组，因为 Set 的 add/delete 操作在查找和去重上效率更高，且语义上表示“唯一性”。
try-catch-finally：这是处理异步错误的关键。finally 确保无论成功失败，加载状态都能清除，避免 UI 卡死在 loading 状态。
依赖数组：useCallback 的依赖项包含 tasks，这虽然会导致 toggleTask 频繁重建，但在任务量不大时是可接受的。若追求极致性能，可改用 useRef 保存最新 tasks 或使用函数式更新 setTasks(prev => ...) 来减少依赖。

追问与延伸：如何应对深度挖掘？

面试官不会止步于此，通常会追问以下问题：

Q1: 如果任务列表有 10 万条数据，前端怎么优化？ 答：

虚拟滚动（Virtualization）：只渲染可视区域内的 DOM 节点。推荐使用 react-window 或 react-virtualized 库。
后端分页：前端不再一次性加载所有数据，而是通过 cursor 或 offset 分页加载。
防抖搜索：如果支持搜索，输入框事件需加防抖（Debounce），避免频繁请求。

Q2: 多用户协作场景下，如何解决冲突？ 答：

操作日志（Event Sourcing）：不存储最终状态，而是存储所有操作事件。通过重放事件得到当前状态。
CRDT（Conflict-free Replicated Data Types）：适用于离线优先的应用，允许离线修改，联网后自动合并。
最后写入获胜（Last Write Wins）：简单场景下，比较时间戳，以最新操作为准。需明确告知用户覆盖风险。

Q3: 时区处理怎么做？ 答：

存储：数据库中一律存储 UTC 时间（Timestamp with Time Zone）。
展示：前端根据用户本地时区（Intl.DateTimeFormat）进行转换展示。
关键点：Todoist 官方源码仓库中关于 due_date 的处理逻辑值得参考，它区分了 date（仅日期）和 datetime（日期+时间），这对跨时区协作至关重要。