# react-todos

**Repository Path**: wyblovecoding/react-todos

## Basic Information

- **Project Name**: react-todos
- **Description**: 基于react hooks实现的待办小应用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-05
- **Last Updated**: 2022-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript, antd-mobile

## README

# react-todos
## 1、应用说明
本应用是基于react hooks + Mobx + TypeScript + antd mobile的待办应用

## 2、目录结构(src)
* assets: 静态文件
* components: 组件
* hooks: 自定义hooks
    * todo: 跟待办应用相关的自定义hooks
    * utils: 工具类自定义hooks
* pages: 页面
* storage: 跟本地存储的相关逻辑(相当于db)
* store: 基于Mobx的全局存储
* types: 类型定义
* index.tsx: 入口文件

## 3、项目启动
* npm i: 安装相关包
* npm start: 运行
* npm run build: 打包

## 4、相关技术
* react hooks: 
* Mobx: 一种状态管理机制, 类似Vue的Vuex 
* TypeScript: 
* antd mobile: 
* localStorage: 浏览器提供的本地存储。
* dayjs: Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

## 5、相关问题总结
### 基本样式方面
* 公共颜色: 在global.scss中基于:root实现了公共颜色(背景色和文本颜色)
* 完成样式: text-decoration: line-through;设置文本的中间有一条线
* 输入框禁止输入空格: onKeyPress + 正则表达式替换空格

### 自定义hooks
* useState: 保存状态
* useEffect: 模拟生命周期
* useRef: 获取DOM元素
* useMemo: 缓存
* useCallback: 回调函数
* 在useTodos中基于上述方法实现了对todo的逻辑封装

### Context
Context用于实现组件间的数据共享
* React.createContext: 相当于上下文容器(组件)
* XXXContext.Provider: 相当于生产者(用于生产共享数据的地方)

### 事件方面
* 阻止冒泡事件: e.stopPropagation();
* React和TypeScript结合使用时涉及到的一些事件的Type: 
    * 剪切板事件对象：React.ClipboardEvent<T = Element>
    * 拖拽事件对象：React.DragEvent<T = Element>
    * 焦点事件对象：React.FocusEvent<T = Element>
    * 表单事件对象：React.FormEvent<T = Element>
    * Change事件对象：React.ChangeEvent<T = Element>
    * 键盘事件对象：React.KeyboardEvent<T = Element>
    * 鼠标事件对象：React.MouseEvent<T = Element, E = NativeMouseEvent>
    * 触摸事件对象：React.TouchEvent<T = Element>
    * 滚轮事件对象：React.WheelEvent<T = Element>
    * 动画事件对象：React.AnimationEvent<T = Element>
    * 过渡事件对象：React.TransitionEvent<T = Element>

### 动态特效总结
* tansform: 实现元素的2D或者3D转换, 如元素旋转(roate)、缩放(scale)、移动(translate)、倾斜(skew)等
* transition: 实现元素的过渡

其中translate用于实现元素的移动效果: 
* translateX是在X轴上移动, translateY是在Y轴上移动
* X轴正方向为右, Y轴正方向为下
* translateX(0)和translateY(0)相当于元素起始位置
* translateX(-100%)相当于元素向左移动其全部(也就是消失)
* tanslateY(100%)相当于元素向下移动其全部(也就是消失)

### 移动端优化
给输入框左边的加号加上响应事件, 使得点击加号和按回车键是一样的效果

### 表单相关问题
* Form中给Input和TextArea设置初始值不能通过value而是要通过initialValues