记账本案例进阶——月度账单

• 功能点：
1. 点击切换月份
2. 适配箭头显示
3. 统计支出、收入、结余数据

• 点击切换选择框功能实现
• 功能要求：
1. 点击打开时间选择弹框
2. 点击取消/确认按钮以及蒙层区域都可以关闭弹框
3. 弹框关闭时箭头朝下，打开是箭头朝上
• 思路：
• 准备一个状态数据
• 通过切换状态变化实现功能

• 点击确定切换时间显示功能实现
• 思路：
• 创建一个控制时间显示的状态
• 拿到当前选中的时间赋值给状态

• 账单数据按月分组实现
• 思路：
• 从 Redux 中拿到数据
• 数据二次处理（useMemo）
• 按月分组逻辑实现（lodash）

• 计算选择月份的统计数据功能实现
• 需求：点击时间确认按钮之后，把当前月的统计数据计算出来显示到页面中
• 思路：
• 点击确认获取到当前月
• 在按月分组数据中找到对应数组
• 基于数组做计算

• 月度初始化时渲染统计数据
• 需求：打开月度账单时，把当前月份的统计数据渲染到页面中
• 思路：
• useEffect
• 以当前时间作为 key 取账单数组
• monthResult 自动重新计算

• 单日统计列表实现
• 需求：把当前月的账单数据以单日为单位进行统计显示
• 思路：
• 准备单日账单统计组件
• 把当前月的数据按照日来分组（日期列表和账单分组数据）
• 遍历数据给组件传入日期数据和当日列表数据

• 单日账单列表显示功能实现
• 需求：把单日的账单列表渲染到视图中
• 思路：
• 准备列表模版
• 渲染模版数据
• 适配中文显示

• 点击切换列表显示功能实现
• 需求：点击展开收起箭头，切换账单列表显示
• 思路：
• 准备控制显隐的状态
• 点击取反操作
• 根据状态适配箭头和显隐

• 账单类型图标组件封装实现
• 需求：封装一个图标组件，可以根据不同的账单类型显示不同的图标
• 思路：
• 准备纯静态的组件结构
• 根据 Props 适配不同图标
• Props(type)

• 案例演示：react-bill-pro

记账本案例进阶——新增账单

• 功能点：
1. 不同类型的账单列表渲染
2. 支出和收入俩种状态切换
3. 点击保存实现记账功能

• 支出和收入切换功能实现
• 思路：
• 准备控制支出收入的状态
• 点击按钮切换状态
• 适配按钮样式
• 适配数据显示

• 新增账单功能实现
• 思路：
• 组件中收集接口数据
• type：账单类型——支出 pay/收入 income
• money：账单金额——支出为负/收入为正
• date：记账时间
• useFor：账单 Type
• 在 Redux 中编写异步代码
• 点击保存是提交 action

• 收尾优化
• 新账单类型选中状态提示
• 新账单时间选择
• 保存成功提示

• 案例演示：react-bill-pro