React18相关知识学习

css库：npm i bootstrap@5.2.3

ES7+拓展：帮助构建单独组件

关于css用法：可以以组件化css代码，也可以以单独定义

使用前要安装styled-components

并且在要使用的界面引入import styled from 'styled-components';

直接使用css组件，删除className部分了

创建响应式数据

可以直接通过对组件中样式处理来改变盒子的样式

把样式css保存为模块化->Button.module.css，以style的形式导入

此时的classname要设置为

常用的组件库：

Material UI

Tailwind CSS

React图标流行库：npm i react-icons@4.7.1

简化状态更新：npm i immer@9.0.19

import product from 'immer'

使用produce方法（更新对象的新写法）

组件间状态的共享

快速创建：rafce函数式组件

useRef()：引用DOM元素，控制 

最常用到的：获取表单中输入框的数据

（表示当前引用的是html输入对象）

便捷管理hook状态：

在需要用到的界面引入

使用这个钩子，简化获取Dom相关过程

（使用useReact获取到的Dom的值）

字段规则限制：

使用zod库，更便于对各种不同字段进行规则定义

自定义验证规则，可以直接通过此方法来代替定义interface接口，相当于直接帮你定义了

表单解析器

在定义useForm时

前后端相接

使组件变为纯组件，需要用useEddect()钩子来操纵对于元素DOM的操作效果

useEeffect()默认每次render执行，因此可以给他添加判断的依赖项，使其仅在依赖项发生改变时进行render执行useEffect()

这里使用的是jsonplacehoder中的请求连接来获取的服务端数据

这里要注意useEffect要添加上[]防止循环调用

axios.get().then().catch()

使用await，async，单独定义一个函数保存获取的信息

清除请求操作：允许我们取消异步请求操作

使用控制器

等待期间的加载，单独设置一个加载的setState()，来表示异步进程

封装通用响应器

自定义钩子组件

store存储，这里用的不是redux原生，使用React Query

安装：npm i @tanstack/react-query@4.28

在main.ts中导入：

创建实例：const queryClient = new QueryClient()

包裹住<App/>组件

组件中使用：

在使用reactQuery时，我们就不用单独定义类似于useEffect()等钩子，直接调用useQuery所接收到的参数就行，会帮助我们自动更新

避免调用信息直接呈现在页面中，应该单独定义一个hooks.ts文件来存储数据

安装相关的开发者工具：

在main.tsx中导入

添加到<App/>下方

自定义QueryClient配置项

不过一般来说不会直接更改queryClient里的配置项，而是改变useQuery({})的配置项

进行参数传递回调的响应

这里的userId是页面内定义的useState()所传递的参数

（避免数据刷新时，页面上下跳动）

无限查询实现：

useQuery修改为useInfiniteQuery，新增使用getNextPageParam方法   

useMutation()

关于突变钩子的：突变 | TanStack Query React 文档 - TanStack 文档

路由部分

安装相关依赖