# react-todolistpro-hook-mobile-demo

**Repository Path**: kevinleeeee/react-todolistpro-hook-mobile-demo

## Basic Information

- **Project Name**: react-todolistpro-hook-mobile-demo
- **Description**: 案例：事件待办

**写法：**

- 组件`hooks`写法

**功能：**

- 事件代办列表渲染
- 点击加号显示输入框
- 输入内容新增待办事件项
- 待办事件项复选框
- 点击查看按钮显示查看内容模态框
- 点击编辑按钮修改模态框显示的内容
- 点击删除按钮删除列表某一项待办事件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-13
- **Last Updated**: 2022-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**<u>案例：事件待办</u>**

**写法：**

- 组件`hooks`写法
- 事件传递(父组件绑定事件`useCallback包裹`传递给子组件)
- 属性传递

**功能：**

- 事件代办列表渲染
- 点击加号显示输入框
- 输入内容新增待办事件项(`useCallback`)
- 将列表数据缓存到`localStorage`(`useEffect`)
- 点击待办事件项复选框同步事件中横线显示(`useCallback`)
- 点击查看按钮显示查看内容模态框(`useCallback`)
- 点击编辑按钮修改模态框显示的内容(`useCallback`)
- 点击删除按钮删除列表某一项待办事件(`useCallback`)

**知识点：**

- 插槽的运用
- 原生`react`组件数据传递
- 认识常用的`hooks`钩子
- 项目设计
- `useEffect`使用

**案例展示图：**

![image-20220214150050749](https://gitee.com/kevinleeeee/blog-hexo-image-bed/raw/master/img//image-20220214150050749.png)

**组件划分：**

- Header标题组件
- 输入框组件
- 列表某一项组件
- 模态框组件(利用插槽插入内容复用)
- 查看内容组件
- 编辑内容组件

**项目目录：**

```
├─src
|  ├─App.css
|  ├─App.js - useState声明数据/定义本组件方法和useCallback子组件使用的方法/useEffect对localStorage进行读写/组件视图绑定/子组件属性和方法传递
|  ├─index.jsx - 入口文件/引入默认样式/渲染APP组件挂载页面
|  ├─libs 
|  |  └utils.js - 工具函数/格式化时间
|  ├─components
|  |     ├─TodoItem - 列表某一项的组件
|  |     |    ├─index.jsx - 接收父组件属性和方法/绑定视图/事件传递到父组件
|  |     |    └index.scss
|  |     ├─NoDataTip - 无数据页面组件
|  |     |     ├─index.jsx
|  |     |     └index.scss
|  |     ├─Modal - 通用模态框模板组件
|  |     |   ├─index.jsx - 接收子组件(CheckModal/EditModal)属性和方法作为插槽填入/绑定视图
|  |     |   ├─index.scss
|  |     |   ├─EditModal
|  |     |   |     ├─index.jsx - 返回Modal模板/传入属性和子HTML元素/绑定ref/定义提交编辑表单方法/绑定视图
|  |     |   |     └index.scss
|  |     |   ├─CheckModal
|  |     |   |     ├─index.jsx - 返回Modal模板/传入属性和子HTML元素/绑定视图
|  |     |   |     └index.scss
|  |     ├─Header - 标题组件
|  |     |   ├─index.jsx - 绑定视图/触发组件点击事件
|  |     |   └index.scss
|  |     ├─AddInput - 输入框组件
|  |     |    ├─index.jsx - 绑定视图/绑定ref/触发组件点击事件
|  |     |    └index.scss
|  ├─assets
|  |   ├─js
|  |   | ├─common.js
|  |   | └fastclick.js
|  |   ├─css
|  |   |  ├─border.css
|  |   |  ├─resets.css
|  |   |  └ui.css
├─public
|   ├─favicon.ico
|   ├─index.html
```

**总结：**

- 此项目使用的是非`redux`数据管理的方式通信比较麻烦
- 理解`useState`的使用场景
- 合理使用`useEffect`对`localStorage`进行读写
- 合理使用`useCallback`避免子组件多次更新渲染
- 合理使用`useRef`获取DOM节点属性

**源码地址：**

https://gitee.com/kevinleeeee/react-todolistpro-hook-mobile-demo