橘子记账🍊（REACT）知识点总结

!/usr/bin/env bash

让react 支持typescript create-react-app . --template typescript
为了不让每次中断yarn start后，再打开时新创建一个窗口，我们需要创建一个.env文件用来告诉他不要打开浏览器。 BROWSER = none
删除Git里的.idea这个文件夹（自动创建的）

git rm -r --cached xxx 会把xxx里面的所有目录从Git里面删掉，但是本地还是有的。

ls -la 可以查看当前目录所有文件，包括隐藏的。

Screen Shot 2020-05-24 at 1.20.59 PM.png

让cra（create-react-app）支持css,scss

css normalize. 只需 @import-normalize （其实没什么用的功能，面试可能会问）
搜索中文字体css github，就会出现一些好看的字体
——>CSS normalize & css reset区别？

CSS normalize 是保证页面在不同浏览器上的默认样式相近。 CSS reset 是让CSS所有样式重置。
——>遇到的较难的技术问题？

我想让React应用支持SASS（一种css preprocessor，用法科普）
需要node-sass, 他有两个缺点：下载速度慢（经常被墙）、本地编译慢
于是我想改用dart-sass代替node-sass
但是React只支持node-sass不支持dart-sass
经过我的努力搜索和研究
我发现npm6.9支持一个新功能，叫做package alias
yarn add node-sass@npm:dart-sass即可偷梁换柱瞒天过海
最后我达成了我的目标。

如何让CSS@import引用更方便

让src成为resource root, 就可以直接写目录名来引用例如 [@import](#) "yyy/bbb"
js也不需要@，在tsconfig.json添加一行“baseUrl”:”src”,直接import ‘xxx/yyy.tsx’来引用‘src/xxx/yyy.tsx’

接下去需要确定页面url，将url 与组件一一对应，在App组件里用给出router渲染区域

Router有两种模式：history & hash

如果你没后台服务器，就只能用Hash；如果你有后台服务器，配置所有路径都到首页才能用History。
styled-components——真香技术

放icon用svg-symbol（自定义Loder，需先yarn eject在webpack config里配置，拿到webpack配置前后都要commit一下），因为如果直接通过路径引用图片的形式，不方便改变颜色，而且修改宽高图片容易变形，svg高保真，不会变形。

自定义loader插入到module/return()/module:{…}/rules:{…}/{…}/oneOf:[]/最上面加入即可
yarn-eject\svg-sprite-loader & Tree Shaking（definition不会用到的东西就会从树上摇下来）
如果要用svg，不要import（关键字），用require（函数）引入，因为require不会被treeshaking。

我于重复不共戴天

优化重复部分，封装组件

如何require 一个目录或文件夹

let importAll = (requireContext: __WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons',true,/\.svg$/));} catch (error) {console.log(error);}
//如果出现__WebpackModuleApi有下划红线，可能因为typescripts 不认识这些全局变量，需要手动
//引入@types/webpack-env

点击时变色，activeClassName,是需要引入NavLink的一个属性
如图片本身有颜色，则不方便给它再加别的颜色，需要在它的代码中先去掉svg原来底色，那这样就非常不方便，我们可以使用如下方法，

在webpack里这样配置

{loader: 'svgo-loader', options: {
                    plugins: [
                      { removeAttrs: {attrs: 'fill'} },
                    ],
                  },}
 //这些要在svgo-loader去找它的相关属性

css小知识，如果你把一个东西绝对定位了，那它的高度就会变成0了,要加上 width:100%;left:0;
小问题，了解box-shadow的inset属性。

CSS **box-shadow** 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 Screen Shot 2020-07-01 at 7.21.22 PM.png

React onChange和HTML onchange是不一样的， React onChange 会在你输入一个字的时候就触发（受控型组件），HTML onchange 在你鼠标移走的时候触发（非受控型组件），早于onBlur。
type Selected = typeof selected 可以获取一个值得类型，obj:Parcial可以定义obj为Selected类型的部分类型`
抽离useState需要的话要么用函数组件，要么用HOOK，用HOOK的话，导出不能是数组，只能是对象，否则报错，以后可研究一下。

而且必须要use开头，它才能知道你是一个hook，否则报错。![Screen Shot 2020-07-02 at 9.35.20 AM.png](https://cdn.nlark.com/yuque/0/2020/png/912821/1593653769057-cf98b3b0-82fb-4ff9-9f7a-1bdc0441d5b5.png#align=left&display=inline&height=206&margin=%5Bobject%20Object%5D&name=Screen%20Shot%202020-07-02%20at%209.35.20%20AM.png&originHeight=206&originWidth=1154&size=96289&status=done&style=none&width=1154)

自定义hook就是封装一个用到（useEffect\useState\useRef）的东西在里面后，导出它的读写接口，就叫自定义HOOK。
exact={true}, 简写exact，可精准匹配路由。
函数组件不支持ref，得把ref去掉，从非受控组件变成受控组件。
React.InputHTMLAttributes<HTMLInputElement> 可以使你调用时，有什么属性，我就接受什么属性.

`const {label, children, ...rest} = props;...<input {...rest}/> 这种写法可以把props的所有属性都拷贝到input组件上。

React 合并ClassName需要用一个库，叫classnames。
让icon组件支持svg所有属性，需声明参数类型如下。
```
type Props = {
name?:string} & React.SVGAttributes<SVGElement>
```
useEffect(()=>{}) 不加第二个参数，就是每次渲染都会触发，若是 useEffect(()=>{},[]) 加上空数组，那就是第一次从localStoreage里读到数据的时候的写法，若是 useEffect(()=>{},[tags]) 那就是在TAGS数组变化的时候触发
当你想使用 useEffect(()=>{},[tags]) 来保存数据时，tags产生变化，useEffect就会被触发，但是，这个useEffect会把第一次从undefined变成空数组的这个过程记录下来，当你修改时就是第二次触发，所以一共会有两次触发，很明显第一次是多出来的，所以需要封装一个hook如下. ```javascript const count = useRef(0);//用一个计数器 useEffect(()=>{count.current += 1}); useEffect(()=>{if(count.current > 1){window.localStorage.setItem(‘tags’,JSON.stringify(tags))}},[tags])


25. 函数参数默认值
```javascript
Layout.defaultProps = {
  scrollTop: 0
}

部署 ```javascript 在scripts里面写一个脚本，自动运行如下代码
!/usr/bin/env bash

yarn build && cd build && git init && git add . && git commit -m ‘deploy’ && git remote add origin git@github.com:Luna-luo/money-2-website.git && git push -u origin master -f cd -

//运行时，写 sh scripts/deploy.sh


27. 给部署脚本添加一个可执行权限 ` chmod +x scripts/deploy.sh` 
27. 去除滚动条
```javascript
&::-webkit-scrollbar{
    display:none;
  }

!/usr/bin/env bash