配置文件

public/

  • manifest.json：pwd

  • robots.txt：让搜索引擎（搜索引擎爬虫）怎么对待

    Disallow:/secret 不允许搜索引擎访问什么页面

根目录

  • gitignore：告诉git忽略什么文件
  • package.json：每个前端项目的入口文件
  • readme.md
  • tsconfig.json：配置typescript
  • yarn.lock：锁定版本号，package.jason不能精确锁定版本号，只能锁定到版本号的倒数第一位或者第二位。

注意：在源代码中使用的图片，字体，文件都要放在src中，容易产生误解要放在public。

相对路径嵌套太多层可以配置当前目录使用绝对路径

tsconfig.json：

{

“compilerOptions”: {

“baseUrl”: “./src”,

格式化工具：Prettier

一、Husky

Husky 是一款 Git Hooks 工具，可以在执行特定的 git 命令时（如: git commit, git push）触发对应的脚本

安装: (当前版本 7.x)

1
2
3
$ npm i -D husky
$ npx husky install
$ npm set-script prepare "husky install"

执行以上代码之后，项目的根目录会多出一个 .husky 文件夹，并且 package.json 中会增加一个脚本执行命令

1
2
3
4
5
6
// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

// prepare 会在每次 npm install 的时候执行

现在 husky 已经安装好了，接下来添加对应的钩子函数

比如我需要在每次 git commit 提交前执行某些操作，就可以添加一个 commit-msg 钩子

1
npx husky add .husky/commit-msg 'npm test'

然后 .husky 目录下就会增加一个 commit-msg 文件

img

这样每一次 git commit 都会执行一次 npm test

// 如果面临特殊情况，需要绕过 Git Hooks，可以使用 –no-verify

二、 Commitlint

Commitlint 可以校验 git commit message, 只有规范的 commit message 才能提交

安装: (当前版本 16.x)

1
npm i -D @commitlint/{config-conventional,cli}

然后在项目根目录新建一个 commitlint.config.js 文件

1
2
// commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };

上一节已经在项目中引入了 Husky，修改一下 commit-msg 脚本，在每次 git commit 的时候执行 commitlint 校验

1
2
3
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

不满足规则的提交会报错

Commitlint 提交规范
commitlint 推荐我们使用 config-conventional 配置去写 commit

提交格式（注意冒号后面有空格）
git commit -m [optional scope]:

type ：用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？

optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。

description：一句话描述此次提交的主要内容，做到言简意赅。

常用的 type 类型

类型 描述
build 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore 其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci 持续集成修改
docs 文档修改
feat 新特性、新功能
fix 修改bug
perf 优化相关，比如提升性能、体验
refactor 代码重构
revert 回滚到上一个版本
style 代码格式修改, 注意不是 css 修改
test 测试用例修改

三、Lint-staged

在提交的代码的时候，可以通过 ESLint、Prettier 等工具来格式化代码

但如果直接处理全部代码，首先是可能存在性能问题，其次是可能会修改掉别的同事的代码

这时可以引入 lint-staged，它可以过滤出 Git 代码暂存区文件，这样就不会影响到未更改的文件

安装: (当前版本 12.x)

1
npm i -D lint-staged

然后在项目根目录创建文件 .lintstagedrc，配置所需要的规则

比如对暂存区的文件做格式化：

1
2
3
4
5
6
7
8
9
{
  "*.{js,jsx,less,md,json}": [
    "prettier --write"
  ],
  "*.ts?(x)": [
    "prettier --parser=typescript --write",
    "eslint --quiet"
  ]
}

甚至对特定文件执行脚本：

1
2
3
4
5
{
  "src/locales/zh-CN.ts": [
    "npm run your-command"
  ]
}

最后通过 Husky 来执行 lint-staged

1
npx husky add .husky/pre-commit 'npx lint-staged'

jsx中用map渲染的每一个列表都要有一个key

jira-dev-tool：这个开发者工具用MSW以Service Worker为原理实现了“分布式后端”，即：所有请求被Service Worker代理。1.后端处理后，以localStorage为数据库进行增删改查。每个人都可以安装一个独立的后端服务和数据库，不用受任何中心化服务的影响。解决了服务脆弱，请求次数有限，不稳定，如果down了学员就没法使用以及学员对后端的数据库控制有限，如无法轻易的重置数据库。2.HTTP请求精准控制，最佳实践的项目，健壮性是一个被重点关注的点。这个开发者工具可以精准的控制HTTP的请求时间，失败概率，失败规则。可以对loading控制，对错误的控制。

安装

在public多了一个启动分布式服务必须的文件mockServiceWorker.js，将它加入到git中。

mock方案

json-server方案

1.全局安装：npm i json-server -g（全局安装的目的是在整个系统中使 json-server 命令可用，可以在任何目录中直接运行 json-server。

2.加一个db.json作为我们mock的数据

3.启动server：json-server –watch db.json

4.把json-server嵌入到项目中

  • yarn add json-server -D

  • 再在根目录新建两个文件夹：__json_sever_mock__

  • 在文件夹__json_sever_mock__中建文件：db.json

  • 把第2点加的db.json删掉

  • 在package.json的scripts加： “json-server”:”json-server json_server_mock/db.json –watch”

  • 启动json-server：npm run json-server

如果地址name为空，不知是要找name为空的还是忽略名字，所以要写一个函数删除键为空的对象。在一个函数里，改变传入的对象是不好的，所以复制再改变返回复制后修改的。

hook只能在其他hook或者组件中运行，不能在普通函数中运行。什么时候用函数，hook

不在输入过程中多次发送请求，使用debounce

d.ts是纯粹的说明书文件，给js打一个ts的补丁

连接真实服务端，使用的是localStorage数据库

开发者工具jira-dev-tool

安装之前要确保git没有尚未提交的文件

npm i imooc-jira-tool

把启动分布式必须的文件右键mockServiceWork–>git–>add gitignore

函数式编程中重要的pointfree消参

即使登录成功后，但是后续所有的请求都是401，刷新又回到登录页面，这是因为token失效了，如何在登录状态时让每个请求都自动携带token去服务端来保持一个登录的状态

用fetch抽象http请求方法，增强通用性

fetch为什么要手动抛出异常而不能通过catch发送异常

?:表示可选，如果有解构就不能用，可以给一个默认值，当有默认值就自动变为可选

类型别名type在很多情况下可以和interface互换，但是在或的情况下无法替换

interface也无法实现utility type，常用：Partial，Omit

安装使用antd:yarn add antd

import ‘antd/dist/antd.less’

务必在jira-dev-tool后面引入

如果要修改默认颜色，可以配置less变量来重新定义颜色，因为使用的是create-react-app，(antd官网看）要引入CRACO，安装craco，替换scripts中的react-scripts为craco…

JWT

在真实环境中，如果使用firebase这种第三方auth服务的话，本文件不需要开发者开发

useDebounce防抖

token要携带，抽象HTTP请求

即使登录成功后，但是后续所有的请求都是401，刷新又回到登录页面，这是因为token失效了，如何在登录状态时让每个请求都自动携带token去服务端来保持一个登录的状态呢。

把token参数要携带在header中，所以需要把token加在请求地址中。每次发异步请求都要加，所以封装一个函数。

  • utility types 联合类型

可以自定义类型别名type，Parameters只是类型别名中的一种，很多情况下可以和interface互换。

1
2
3
4
5
6
7
export const useHttp = () => {
    const { user } = useAuth()
    //这里的typeof是js的，runtimes运行
    const a=typeof user
    //这里的typeof是ts的，静态环境运行，提取变量类型，最后转换成js就不会有这个类型了，因为js是弱类型
    return (...[endpoint, config]: Parameters<typeof http>) => http(endpoint, { ...config, token: user?.token })
}

虽然?可以表示可选，但是有时我们并不想改变原来的类型（有可能是第三方库的变量），使用Partial这个utility type。Omit删除类型中的某些属性

fetch和axios

服务端如果返回异常，fetch如果不手动抛出异常，fetch不会抛出异常（可以使用catch测试）

服务端如果返回异常，axios会抛出异常

安装antd

安装craco，覆盖create-react-app创建的默认配置

css in js

在 emotion 编写css， 若是发现代码没有高亮，则需要安装 vscode/webstrom 插件:vscode styled-components插件

create-react-app默认的就是用img渲染图片，使用svg渲染

用方便的方式管理异步操作 custom hook

抽象出users和projects的异步请求

异步函数与Promise

同步和异步，为什么不能直接if(error)Error(error)而是要使用trycatch，因为如果同步代码执行了，但是异步代码还没执行,error还没获得正确值

错误边界

错误边界的实现一定要用class component

改变文档标题

方案一：使用react-helmet

方案二：自定义hook

路由

:后面表示跟的是一个变量

react-router和react-router-dom的关系类似于react和react-dom/react-native/react-vr…

react是一个核心库，处理虚拟的计算的理论的逻辑，经过一系列的计算结果会被react-dom消费，react-dom在浏览器，react-native在客户端、ios消费

react-router是可以运用在native环境中的。

为什么Link是从react-router-dom中引入，因为Link的点击等操作是和浏览器强关联的

在单页面应用（不能改变参数就重新刷新页面）中实现使用url来进行状态管理

useMemo解决依赖循环问题：

基本类型，可以放到依赖里；组件状态，可以放到依赖里；非组件状态的对象，绝不可以放到依赖里。

遇到的错误

1.没有把暂存区的代码先提交就下载了jira-dev-tool，导致不能正常的使用jira-dev-tool工具。

为什么：工具可能在安装过程中生成配置文件，用于指定特定的设置或行为。如果暂存区有未提交的更改，可能会影响配置文件的生成，导致工具无法正确设置。

2.logout不应传参

3.设置可选参数，使用Parameters来读取类型定义，否则不能成功设置可选

4.使用命令安装完antd，报错显示找不到antd.less文件，移除antd，安装更低版本的yarn add antd@^4.24.2

数据在哪？

5.闭包陷阱

useEffect中遇到闭包问题，需要检查依赖项是否设置正确