使用 React 和 TypeScript 构建生产力应用中的目标跟踪系统
内容提要
本文讨论了为生产力应用程序构建目标跟踪系统的过程。该系统允许用户设定和跟踪目标，包括设置截止日期、跟踪进度和为目标分配表情符号等功能。文章涵盖了实现细节，包括将目标存储在数据库中、使用React进行前端实现以及应用程序中使用的各种组件和钩子。还包括了显示时间轴、分组目标和编辑/创建目标等系统不同部分的代码片段。
延伸解读
目标实体的设计考量
文章中的 Goal 实体将截止日期设计为字符串或数字：数字表示时间戳，字符串表示年龄。这种设计让目标可以基于具体日期或用户年龄来设定，为时间轴按年龄展示提供了基础。同时，目标包含 plan、target 和 taskFactories 等可选字段，支持高级计划、可量化目标和重复任务，体现了功能扩展的灵活性。
时间轴与年龄的关联逻辑
GoalsTimelineProvider 根据用户出生日期和活跃目标计算时间轴区间：起点为最近生日或最早目标截止日，终点为三年后生日或最晚目标截止日加一年。时间标签最多显示 10 个，避免拥挤。这种设计将目标与用户年龄直接关联，帮助用户直观感受时间紧迫性，但前提是用户必须设置出生日期。
前端状态管理的模式
文章使用多个 Context Provider 来管理状态，如 CurrentGoalProvider 和 ActiveItemIdProvider，避免 prop-drilling。GoalsViewSelector 通过路由切换活动与已完成目标视图，而 useCurrentPageView 钩子从路径解析当前视图。这种模式适合中大型应用，但增加了组件树的嵌套层级，需注意性能影响。
数据存储与更新策略
目标存储在 DynamoDB 的用户项中，以目标 ID 为键。这种设计便于对特定目标进行高效更新，而不是替换整个目标列表。文章未深入后端实现，但提到使用 updateUser mutation 进行乐观更新，这能提升用户体验，但需处理更新失败时的回滚逻辑。
Q&A
目标跟踪系统的主要功能是什么？
目标跟踪系统允许用户设定和跟踪目标，包括设置截止日期、跟踪进度和为目标分配表情符号等功能。
如何在前端实现目标跟踪系统？
前端实现包括两个子页面：一个用于活动目标，另一个用于已完成目标，并使用GoalsViewSelector组件在两者之间切换视图。
目标实体包含哪些属性？
目标实体包含唯一标识符、表情符号、目标名称、状态、截止日期、高级计划、可测量目标的当前值和目标值等属性。
如何存储目标数据？
目标数据存储在DynamoDB中，目标ID作为键，存储在用户项中以便于高效更新。
如何处理目标的截止日期？
用户可以为目标设置截止日期，截止日期可以是特定日期或与用户年龄相关联。
系统如何显示用户的年龄和目标进度？
系统通过时间轴显示用户的年龄和目标进度，用户可以在时间轴上查看目标的状态和截止日期。
