富贵汪记账React版

项目介绍

基于 React / React Router / 自定义 Hooks / webpack / TypeScript / LocalStorage 实现的极简主义记账应用。

功能

1、记账：金额、标签、备注、收入或支出等。

2、管理标签：添加、改名、删除

3、实现效果 富贵汪记账 (gitee.io)

4、源码链接zxjdzxb/wealth-dog (github.com)

重点思路

用命令创建React

Create-react-app . --template typescript 在当前目录创建\

Git reset HEAD 查看更改过文件名称

目录声名

常用到文件:

public：index.html

src：App.tst;index.tsx;setupTests.ts\

这标签可以帮助检查代码错误给出提示\

<React.StrictMode>
 <App />
</React.StrictMode>

这个文件是typescript的声名文件

默认的配置文件

老师用的版本不支持dart-sass,用的小技巧，安装node-sass但把内容替换成dart-sass

yarn add node-sass@npm:dart-sass

正题

Styled-components

将css写到js里面，插件会自动翻译。这个真的好用，不用再为想className烦恼了

yarn add styled-components
yarn add --dev @types/styled-components

React Router

yarn add react-router-dom 
yarn add  --dev @types/react-router-dom

我用的History但是我查了一下官方文档建议不要用HashRouter

reactrouterdotcom.fly.dev/docs/en/v6/…

哈希的好处是不需要后台服务器支持，如果走错路径也会有保底

@import-normalize;

写在scss中的样式，可以设置默认样式与网页一致，但VsCode会报错不认识，不影响。

在设置布局中用到了flex-grow:1让显示内容尽量的高。并且在主要内容里加了一个overflow:auto若显示内容超出，自动给里面加一个滚动条

底边框添加阴影：box-shadow:0 0 3px rgba(0,0,0,0.25);

SVG sprite loader

我自己用的添加class设置的照片，也成功了，但为了练习试了一下，这插件会在页面帮我们把引入的svg放到一个大的svg里包住，把大的svg放到body里面

yarn eject命令可以提取出webpack的config文件进行更改

yarn add --dev svg-sprite-loader安装 svg-sprite-loader

yarn add --dev svgo-loader给照片添加属性

上边的console.log打印出来的是引入的照片会自带一个id，用哪个svg就里面放个use里并且引入这个id， 但引入不能用import照片还没改，要用require()

require()

他与import类似但import引用但不插入到页面会被DOM树删除，
require()引用不会被删除，但必须将内容被括号包括起

因为svg代码重复了三遍，创建一个组件，组件里就是其中一个svg做的事情，但因为id是个变量所以传进来时候要用props，但props有个参数“props”隐式具有“any”类型，但老师不让设置成any,自己定义了一个type 如图！

引入一整个目录，不再需要require每一个照片的路径了，这代码老师没说，直接让复制了。但复制后会有报错，需要安装插件 yarn add --dev @types/webpack-env安装之后，就不会报错了，并且可以删除引用

let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons', true, /.svg$/));} catch (error) {console.log(error);}再用记得改icons地址！

NavLink

这是一个当点击摁键会变颜色的style 总共分为3步

1. 把Link标签改为NavLink
2. 把代码复制粘贴
3. 改喜欢的颜色 style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}
   网络异常，图片无法展示

   |

无聊的写css中 记录一些被遗忘的布局

White-space:nowrap阻止文字换行

:focus{outline: none;}阻止默认选中的边框

标签里添加类似注释的

line-height:72pxcss中尽量写行高，别写高度，容易污染吧？

box-shadow:inset 0 -5px 5px -5px rgba(0,0,0,0.25);给边框设置个样式，不突兀

flex-grow:1;剩下的空间都给他

overflow:hidden溢出部分隐藏

text-overflow:ellipsis超出部分用省略号\

将 Styled Component 改造为 Function Component

改造中遇到标签问题卡了许久，变成React 标签会变成自结束标签const tagName =window.prompt('新标签的名称为')window的属性当点击时弹出对话框询问添加标签名称

Filter() 函数

Filter()  函数用于过滤序列，过滤掉不符合条件的元素，返回由符合条件元素组成的新列表。

Python filter() 函数 | 菜鸟教程 (runoob.com)

onChange事件

在添加受控组件（备注栏默认有事件，但要添加受控）时用到了onChange事件

.onChange={(e)=>setNote(e.target.value)

非受控组件：

非受控组件，不会监听变化过程，只需要记录当鼠标移出后的onBlur最终结果，例如修改文档，只需要知道最后哪里加粗哪里空行即可。但Input并没有将值传给note这时就用到了useRef拿到值，这个useRef默认是个html的input元素，默认值为空。将这个值用setNote放在Note上。这样可以在用户将鼠标移出时获取到这个Input的值

type X = {"-": string;"+": string;}
type Y = "-" | "+"

这样useState可以从categoryMap里拿到key

**As**可以强制指定类型

switch case

switch (表达式)
{
    case 常量表达式1：    语句1 break;
    case 常量表达式2：    语句2 break;
    case 常量表达式n：    语句n break;
    default:        语句n+1
}

若是表达式1则执行语句1，后边一定有个break!若是表达式n则执行语句n

Type Script

因为seleceted类型有四种，所以第16行代码Ttypeof获取这四种的值得类型，赋给Selected，然后obj:Partial<Selected>
给Partial传一个类型，类型里面有四种类型，Partial可以获取其中任意类型

封装自定义Hook

在函数里用useState、useRef等然后把读和写接口tuturn出去

抽离组件时，因为参数多，所以不一一写出来，用...rest这个大概用法是一个一个的复制过来 除了label,和childern

React封装了SVG，（window的一些属性，例如返回上一层菜单）

组件挂载后执行

JSON.parse将localStorage缓存变成对象

保存后弹提示成功

TypeScript提供了一个函数，Omit专门作用与类型。 意思是newRecordItem除去createdAt这一项.要是有两个不要的用"|"

时间库

Yarn add dayjs

一定要大写括号内容