一、创建项目并配置
1、创建项目：
使用该命令会自动安装 eslint：
npx create-react-app jira --template typescript
2、在 tsconfig.json 中配置路径：
3、 安装 prettier：
npm install --save-dev --save-exact prettier
4、创建.prettierrc.json文件：
echo {}> .prettierrc.json
5、提交代码之前，自动格式化代码：
npx mrm@2 lint-staged
安装完之后，在package.json中增加几行代码：
6、prettier 和 eslint 一起工作的时候，会有些冲突,所以安装eslint-plugin-prettier：
npm install eslint-plugin-prettier -D
然后在package.json中配置，使用prettier的规则，覆盖了原来的一部分规则，保证了 prettier 和 eslint 能够互相正常的工作：
配置完之后，会在代码提交之前自动对代码进行格式化。
7、规范git commit message 提交问题：
帮助我们检查每次提交代码的时候，commit message 是否符合一些规范，如果不符合就提交失败：
8、使用json-serve(官网)模拟:
》安装： npm install -g json-server
》创建 db.json：
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
》启动命令：
json-server --watch db.json
控制台启动成功：
在postman中访问地址能够成功访问到我们的本地数据：
9、在项目中配置 json-server
》 安装命令： npm install json-server -D
》 在根目录下创建文件夹： __json_server_mock__
》 在 package.json文件中创建命令：
"json-server": "json-server __json_server_mock__/db.json --watch"
》在控制台上输入命令：npm run json-server
二、组件逻辑复用
1、自定义 useMount
在初始化的时候会去请求数据，例如：
// 依赖为空，模拟componentDidMount
useEffect(() => {
fetch(`${apiUrl}/users`).then(async (res) => {
if (res.ok) {
setUsers(await res.json())
}
})
},[])
如果有多个请求接口，就要写多个这样的钩子，有没有办法自定义一个hook，模拟页面初始化接口请求呢？
自定义 custom hook,必须以 useXXX开头：
// 自定义custom hooks
export const useMount = (callback) => {
useEffect(() => {
callback()
}, [])
}
页面中修改代码：
// 依赖为空，模拟componentDidMount
useMount(() => {
fetch(`${apiUrl}/users`).then(async (res) => {
if (res.ok) {
setUsers(await res.json())
}
})
})
2、自定义 useDebounce
当在 input 中输入信息后，请求接口的时候，会发生多次请求，如何防止页面抖动呢？可以自定义一个 useDebounce
发生多次请求的接口：
const [params, setParams] = useState({
name: "",
personId: "",
});
useEffect(() => {
fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(params))}`).then(async (res) => {
if (res.ok) {
setList(await res.json())
}
})
}, [params]);
自定义 useDebounce:
// custon hook
export const useDebounce = (value, delay) => {
const [debounceValue, setDebounceValue] = useState(value)
useEffect(() => {
// 每次value变化时，设置一个定时器
const timeout = setTimeout(() => {
setDebounceValue(value)
}, delay)
// 在上一个useEffect处理完以后再执行
return () => {
clearTimeout(timeout)
}
}, [value, delay])
return debounceValue
}
页面代码：
const [params, setParams] = useState({
name: "",
personId: "",
});
const debuunceParam = useDebounce(params, 2000)
// 有依赖，模拟componentDidUpdate
useEffect(() => {
fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debuunceParam))}`).then(async (res) => {
if (res.ok) {
setList(await res.json())
}
})
}, [debuunceParam]);
项目插件
1、 qs
qs插件是具有一些附加安全性的querystring解析和字符串化库
安装qs:
npm install qs
安装 qs 的typeScript 的定义文件：
npm install @types/qs -D
2、CSS- in-JS
安装命令：
npm i @emotion/react @emotion/styled
使用
import styled from '@emotion/styled'
function ChangeState() {
return <Container>
</Container>
}
export default ChangeState
// styled
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
`
