React记账本开发笔记

1.create-react-app(以下简称cra)是react官方提供的脚手架工具

安装：yarn安装有问题就用npm

yarn global add create-react-app
npm install -g create-react-app

在create react app里面支持TypeScript.

//在某个文件夹下面执行命令行
create-react-app . --template typescript
//然后yarn start就可以了
yarn start

注：安装过程中遇到node版本问题，可以选择使用安装多种node版本再使用nvm切换

1.1文件说明：react-app-env.d.ts（typescipt声明文件）

2.sass配置

2.1选择dart-sass,node-sass要从github下载，很慢而且极有可能不成功。下载完安装还需要本地编译，也很慢。所以使用dart-sass来替代node-sass.

2.2react不支持dart-sass,使用npm包别名功能支持dart-sass替换node-sass

yarn add node-sass@npm:dart-sass

3.使用styled-component，这样就可以在js里写css了，记得在webstorm添加styled-components插件。

//安装
yarn add styled-components
//在ts文件里支持styled-components
yarn add --dev @types/styled-components@5.0.1

具体使用方式如下所示

3.1styled-component源于模板字符串：带标签的模板字符串

简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。使用这个技术写的库有很多，react中火的是styled-components，vue中css scope也是这个思想，每个组件都有它的scopeId，样式进行绑定，css modules也是同样的。

4.在ts中使用react函数组件，在变量的后面加上冒号声明变量的类型。

import React from "react";
const X:React.FunctionComponent = ()=>{
    return (
        <div>hi</div>
    )
}

5.你在任何一个地方使用React的useState只有两种可能：1.在函数组件里面用；2.在自定义hooks里面用，只要用use开头就是自定义hooks。

//抽离出一个useState，然后把读写接口放到外面去，封装一个自定义Hook
const useTags = () =>{
    const [tags, setTags] = useState<string[]>(['衣服','食物','住处','交通']);
    return {tags, setTags};
};

6.创建一个排序桶，本质上forEach和map是一样的，但是map有返回值。

const hash:{[K:string]:RecordItem[]}={}
selectedRecords.map(r=>{
        const key = day(r.createdAt).format('YYYY-MM-DD')
        if(!(key in hash)){
            hash[key] = []
        }
        hash[key].push(r)
    })