茶文化网站设计免费衡阳网站建设公司

参考课程：

【黑马程序员 React18入门到实战】

[https://www.bilibili.com/video/BV1ZB4y1Z7o8]

@ZZHow(ZZHow1024)

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

• 功能点：
  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