用命令创建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步

把Link标签改为NavLink
把代码复制粘贴
改喜欢的颜色 style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}

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

white-space:nowrap阻止文字换行
:focus{outline: none;}阻止默认选中的边框
<input type="text" placeholder="在这里添加备注"/>标签里添加类似注释的
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 标签会变成自结束标签<TagsSection/> 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缓存变成对象
保存后弹提示成功