描述：从0到1做一个事务与项目跟踪软件的一点记录…

用 Create React App 初始化项目

作用：快速初始化 react 项目

Create React App 官网：https://create-react-app.dev/docs/getting-started

1
2
3
4
5
6
// 下载项目模板
npx create-react-app [项目名称]
// 进入项目根目录
cd [项目名称]
// 开启项目
npm start

配置eslint、prettier 和 commitlint 规范工程

作用：规范工程化开发流程

git hooks 踩坑记录：https://segmentfault.com/a/1190000042044415

  1. 让绝对路劲默认到src目录下寻找

tsconfig.json -> “compilerOptions” 中添加配置项”baseUrl”: “./src”

  1. 统一格式化配置

  2. 配置 git commit 的规范（如不符合规范则提交失败）

注意：husky 有v4和v8版本，其中hook的配置是不一样的

prettier

官方文档：https://prettier.io/docs/en/install.html

1
npm install --save-dev --save-exact prettier

然后，创建一个空配置文件，让编辑器和其他工具知道你正在使用 Prettier：

1
echo {}> .prettierrc.json

接下来，创建一个 .prettierignore 文件，让 Prettier CLI 和编辑器知道哪些文件不能格式化。这是一个例子：

1
2
3
# Ignore artifacts:
build
coverage
pre-commit

作用：设置在提交之前根据规则自动格式化所有的文件

具体配置：https://prettier.io/docs/en/precommit.html#option-1-lint-stagedhttpsgithubcomokonetlint-staged

用例：当你想使用其他代码质量工具和 Prettier（例如 ESLint、Stylelint 等）或需要支持部分暂存文件（git add –patch）时很有用。

在继续之前，请确保 Prettier 已安装并且在您的 devDependencies 中。

1
npx mrm@2 lint-staged

这将安装 husky 和 lint-staged，然后将配置添加到项目的 package.json 中，该配置将在预提交挂钩中自动格式化支持的文件。

在 lint-staged 中阅读更多内容。

commitlint

作用：在代码提交前检查 git commit 是否规范，如不规范不允许提交。

前提：需要安装 husky

以下是安装 commitlint/cli

1
2
3
4
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

要添加 commitlint 钩子，请使用husky add.

例如：

1
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

常见 mock 方案 配置JSON-SERVER

作用：模拟后端接口

仓库地址：https://github.com/typicode/json-server

第一步：npm install json-server -g全局安装 json-server

第二步：在根目录下新建 json_server_mock/db.json

第三步：在 package.json script 中添加 json-server 启动项

1
2
3
4
"scripts": {
    ...
    "json-server": "json-server __json_server_mock__/db.json --watch"
 },

自定义环境变量

需求：API 接口由于开发环境和生产环境的不同，提供的地址不同。我们不想手动切换 API 接口，那么就需要用环境变量，让 webpack 等打包工具去帮你自动寻找对应环境的变量。

第一步：在项目根目录下创建 .env 和 .env.development 两个文件去存储对应的变量值

如在 .env.development 设置 REACT_APP_API_URL = ``http://localhost:3001，表示我们在开发环境使用的接口API是 http://localhost:3001

如在 .env 设置 REACT_APP_API_URL = ``http://online.com，表示我们在生产环境使用的接口API是 http://online.com

第二步：在需要使用环境变量的地方，使用它。

1
const apiUrl = process.env.REACT_APP_API_URL;

qs

作用：在js object 和 query 间进行转换，多用于发送网络请求携带参数。

qs仓库：https://github.com/ljharb/qs

自定义 useDebounce hook

实质就是生成一个与原始状态不同频率的状态（通过 State hook），并实时监听原始状态的改变（通过 Effect hook），在一定频率后再去改变带有 debounce 频率的状态（通过 setTimeout）。这里采用防抖思想，在执行 Effect hook 后将 timeout 保存下来，在下一个 Effect 执行前将上一个 timeout 清除，如果此 timeout 执行完则不会有影响，如果没有执行完那不好意思直接中断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useEffect, useState } from "react"
// 组件中使用
const [param, setParam] = useState({
    //...状态中的内容
});
const debounceParam = useDebounce(param, 500);
// utils/
import { useEffect, useState } from "react"

export const useDebounce = (value, delay) => {
  // 产生一个 value 的 debounce版本
  const [debounceParam, setDebounceParam] = useState(value);

  // 当传入的值发生改变后执行修改 debounce版本的value
  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebounceParam(value);
    }, delay);
    // 每次在上一个useEffect执行完后再运行,记得一定要返回函数供其使用
    return () => clearTimeout(timeout);
  }, [value, delay]);

  return debounceParam;
};