# jira

**Repository Path**: pearpear/jira

## Basic Information

- **Project Name**: jira
- **Description**: React17、hook、ts仿Jira
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-15
- **Last Updated**: 2022-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**学习笔记**  
创建一个 react Ts 项目
npx create-react-app xxx --template typescript
npx: 可以直接使用 npm 里的包，不需要全局去安装

安装 prettier 依赖包，用于格式化代码（提交代码的时候进行格式化操作，不喜欢可以不装）

1. yarn add --dev --exact prettier
2. 输入指令 echo {}> .prettierrc.json 创建配置文件
3. 创建一个 .prettierignore 的文件，表示不需要格式化的文件
4. 安装自动格式化依赖包，他会在每次提交代码前，自动格式化代码 npx mrm@2 lint-staged
5. package.json 添加配置
   "lint-staged": {
   "\*.{js,css,md,ts,tsx}": "prettier --write"
   }
6. 安装 eslint 依赖，防止和 prettier 冲突
7. yarn add eslint-config-prettier
8. package.json 修改配置，表示使用 prettier 的代码规则
   "eslintConfig": {
   "extends": [
   "react-app",
   "react-app/jest",
   "prettier"
   ]
   }

安装 commitlint,规范 git commit 如果不规则，则会拒绝提交代码

1. yarn add @commitlint/{config-conventional,cli}
2. 执行命令 echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
3. 到.husky 文件夹里创建 commit-msg 执行文件

安装一个非常不错的 moke 服务---尝试操作

1. npm install -g json-server，mac 用户需要 sudo
2. 创建 db.json 文件，开始 mock
3. 启动 json-server --watch db.json
4. // "jss": "json-server **json_server_mock**/db.json --watch --port 3001 --middlewares ./**json_server_mock**/middleware.js"

在项目中使用 json-server

1. yarn add json-server -D
2. 在根目录创建 **json_server_mock** 文件夹（ 注意下划线）
3. 去 package.json 里新增命令 "jss": "json-server **json_server_mock**/db.json --watch --port 3001" // 注意端口别冲突了
4. 执行 npm run jss

环境变量配置
.env 放线上的地址
.env.development 放本地地址
读取环境变量 process.env.xxxxx
在执行 npm start 的时候，会去读.env.development 的变量
在执行 npm ruun build 会去读取.env 的变量
每次修改完，需要重启项目

qs 依赖包
用于请求参数的一些处理，可以不装
yarn add qs
就比如有的请求 url 需要 xxxx&username="xxx"&sex="xx",这时候只要 qs.stringify(params)就能搞定了
ts 的话，要装这个 yarn add @types/qs -D

ts 相当于强类型版的 js，当我们在代码中定义变量（包括普通变量，函数，组件，hook 等）的时候，ts 允许我们在
定义的同时指定其类型，这有使用者在使用不当的时候，就会被及时报错提醒。
bug 大大减少，代码更易读了，开发速度快了。
ts 类型

1. number
2. string
3. array
4. boolean
5. 函数
6. any any 不会做任何类型检查，取消了对类型的保护
7. void 表示函数不返回任何值或者返回 undefied
8. object
9. enum
10. null 和 undefined
11. unknown: 表示这个值可以是任何值
12. never
13. interface 接口,可以理解为组装创建一个我们自己的类型
    在很多情况下，ts 可以帮我们自动推断类型。
    .d.ts 文件类似于 ts 的文档文件， js 文件 + d.ts 文件 === ts 文件
    .d.ts 文件可以让 js 文件继续维持自己 js 文件的身份，而拥有 ts 的类型保护..

安装这个项目的专属开发者工具
这个工具用 MSW 咦 Serveice Worker 为原理实现了“分布式后端”
npx imooc-jira-tool
安装完之后，会在 public =>里新增一个 mockServiceWorker.js 文件，然后要做个配置，详情见主入口文件 index.tsx
然后重新运行项目，在页面右下角会出现一个“齿轮”的按钮
有了这个之后，这个项目后面就不用“json-server”这个插件了.
如果控制台出现了这个错误
index.js:1 [MSW] Detected outdated Service Worker: Currently active Service Worker (f0a916b13c8acc2b526a03a6d26df85f) is behind the latest published one (65d33ca82955e1c5928aed19d1bdf3f9).

The mocking is still enabled, but it's highly recommended that you update your Service Worker by running:

$ npx msw init <PUBLIC_DIR>
则 npx msw init public

JWT： json web tokens

craco: 可以不在 eject 暴露出 webpack 文件的情况下，修改 webpack
如果要修改 antd 主题色，则还需要装个 craco-less
看文档，装好之后，记得要修改 package.json 的 scripts
在根目录下创建 craco.config.js 配置文件

引入 css 模块
yarn add @emotion/react @emotion/styled
用 vscode 开发的话，最好再装个高亮插件“vscode-styled-components”

处理时间的插件
yarn add dayjs 或者 moment 都可以，moment 似乎停止维护了

yarn build 打包之后，控制台会提示 yarn global add serve
我们可以装一下，mac 用户记得 sudo
然后再 serve -s build 就可以直接跑打包后的程序了

插件：页面头部可以根据不同的 url 显示不同的文本
yarn add react-helmet
当然 ts 的话，要安装这个版本
yarn add -D @types/react-helmet

我们引入了路由
yarn add react-router@6 react-router-dom@6 history
react-router 和 react-router-dom 的关系？
react-router: 主要用于管理路由的状态，不停计算此时路由树是怎样的
react-router-dom: 计算的结果由 react-router-dom 来消费

why did you render: 一个告诉你为何代码里会无限渲染的插件
yarn add @welldone-software/why-did-you-render

// 假如说，我们需要保存函数，不能单纯的 useState(() => fun),因为他是惰性的，会默认执行并 return
// 下面两种方法都可以

1. const [callback, setCallback] = useState(() => () => alert("init)) // 需要两次箭头函数
   setCallback(() => () => xxxx)
   等同于
2. const calbackRef = React.useRef(() =>alert("init))
   const callback = calbackRef.current;
   () => callback()
   useRef 他只是一个变量，但他和组件的状态没有关系，所以他不会触发组件重新渲染，重新赋值 useRef.current 是不会触发渲染机制的
   所以他需要我们去手动触发执行的操作

redux-toolkit: 把 redux 再简单的封装了下
处理了 redux 的三个问题：

1. 配置太复杂
2. 很多依赖
3. 要写很多模板代码
   嗯...代码中相关的 redux-toolkit 会在另外一个分支上体现出来(redux-tookit-test)因为后续不用这个方案，但是我们需要学习下.
   安装 yarn add react-redux @reduxjs/toolkit

跨组件状态管理总结

- 小场面
  状态提升/组合组件
- 缓存状态
  react-query/swr
- 客户端状态
  url/redux/context

拖拽插件 yarn add react-beautiful-dnd
安装他的 types 文件 yarn add @types/react-beautiful-dnd -d

部署在 github pages
在 github 上新建仓库
Repository name： 你的 github 名字 + .github.io
插件 yarn add gh-pages -D
在 package.json 写入配置
"predeploy": "npm run build",
"deploy": "gh-pages -d build -r your github store url -b main"
处理在 github pages 出现 404 的方案
https://github.com/rafgraph/spa-github-pages
在 public 中新建 404.html 写入配置，在 public 中 index.html 新增配置即可

代码分割（其实就是动态引入文件）
React.lazy(()=>import("component url))

React.memo  
被 React.memo 包裹的组件只有 2 种情况下会重新渲染

1. 它的 props 发生变化（浅对比）
2. 组件里面用了全局的状态，比如 redux  
   不是所有组件都需要用 React.memo 包裹，大部分情况下用不到，memo 本身就做了计算，它
   只适合计算量比较大的组件，react 本身就很快了。  
   React.memo 是 memo 组件的  
   useMemo 是 useMemo 值的，她俩的区别还是挺大的

Profiler 组件追踪

自动化测试
单元测试： 传统单元测试、组件测试、hook 测试  
集成测试  
e2e 测试  
安装依赖 yarn add @testing-library/react-hooks -D yarn add msw  
执行单元测试 npm run test  
在 src 下的**test**文件是约定好的测试专用文件

![Image text](https://gitee.com/pearpear/jira/raw/master/src/assets/1.png);
![Image text](https://gitee.com/pearpear/jira/raw/master/src/assets/2.png);
![Image text](https://gitee.com/pearpear/jira/raw/master/src/assets/3.png);
![Image text](https://gitee.com/pearpear/jira/raw/master/src/assets/4.png);