- react
- react-router
- redux
/根目录 对应所有的清单条目/detail/:id详细的清单条目 对应某条详细内容
{
id: 编号,
summarize: 一句话的概括,
createTime: 创建时间,
priorityLevel: 优先级（0,1,2,-1分别是高中低无）,
endTime: 到期时间,
status: 当前状态（未完成 0 / 已完成 1）,
type: 任务类型（描述类 0 /子任务类 1）,
percent: 任务完成百分比,
details: {
subTask: [
{
id: 编号,
summarize: 描述,
status: 状态,
}
],
description: 描述,
comments: [
{
id: 编号,
summarize: 内容,
createTime: 创建时间,
}
]
},
}
滴答清单中的日历组件主要有两个面板：
- 选择年月的面板（下面称为年月模板）
- 选择详细某一天的面板（下面称为详细模板）
整个组件的主要业务逻辑是这样的：
- 默认没有选中的日期，则按照当前的年月来渲染详细模板，其中高亮当天，如果存在选中的日期，则按照选中的年月来渲染详细模板，高亮当天的同时还需要选中对应的日期
- 详细模板共显示6行数据，当月数据高亮显示，详细模板可以切换月份
- 年月模板可以切换年份&月份，其中详细模板对应的月份被选中
由此可以确定，日历组件的根组件与外界的组件之间沟通最基础的需要：
- 已选中的年月日（可选的）
- 日历组件中选中某一天的回调函数（必须的）
由此，我们已经确定了日历组件最基本的 props
当然你可以说还需要控制显隐、组件根节点的样式、月份修改的回调以及种种你所需要的 props 这里只是描述最基本的内容
根据职责单一化的原则，最好是将根组件按照面板划分成两个子组件，避免组件过于复杂
在这里没有将日历组件划分成为两个子组件，而是将年月模板作为独立的组件，而详细模板直接编写在根组件中
至此，根组件除了详细模板交互之外，还需要实现控制两个面板的显隐
详细模板
详细模板主要根据当前的年月按照周的形式来渲染日历
每个详细模板都是 7 * 6 的网格，横轴按照周日到周六来排列，当前月不可能占满 42 个格子，其他部分需要上下月的内容来补足
除了渲染日历之外，还需要高亮当天 & 选中对应的日期
因为借助 React，我们所需要完成的部分就是使用已有的数据来生成驱动 React 渲染的数据结构
已有的数据：
- 当天的日期（环境变量，Date.now()）
- 选中的日期的（根组件的 props，是可选的）
React 所需要的数据结构是这样的：
[
{
year: 年
month: 月
day: 日
type: 是不是当前月，还是补足的前一月/后一月
singleTodayChosen: 是不是当天，需要高亮
chosen: 是不是选中的日期，需要选中
} * 42
]
现在我们要做的就是要获得这个 42 个字段的数组
这个 42 个字段的数组，是由当前月的日期，前后补上上个月和下个月的日期
前面我们提到，日历详细模板是 7 * 6 的网格，我们肯定希望当前月在这个网格中居中显示，每个月的天数是 28 - 31 天之间，那么每个月占据的行数一般是 4 - 6 行
如果当前月正好占据了 4 行，那么就是上下各自空一行，当月从第二行开始渲染
如果当前月占据了 5 行，那么就需要判断当前月的第一天是不是超过了周三，来决定从第一行还是第二行来进行渲染
如果占据了 6 行，那么就是从开始占据到了结束，当月从第一行就开始渲染
那么，如何判断当前月占据了多少行呢？
从上面的图可以很明显的看出来
当月占据的行数 = 向上取整((当月第一天对应的周几位置 + 当月的天数) / 7)
至此，我们有了 当月占据的行数，当月开始渲染的那一行
根据上面的信息，很容易就推算出前一个月、下一个月分别补足的数量
综上，我们根据当前的年、月，就可以渲染出这个 6 * 7 的数组
参考： http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
- CSSTransitionGroup 中存在的问题？子元素的变化卸载也会影响整体的动画