react+ts实现简单jira项目的最佳实践记录

发布时间：2023-01-12 23:24:54 来源：互联网

.

田野里，高粱像喝醉了酒，频频点头；玉米正在变黄了的衣服里睡大觉；大豆也小坡了肚皮，蹦了出来；小白菜像列队的士兵整齐地排列在在菜地里。农民正忙忙碌碌地收获着一年的成果，田野里不时传出阵阵欢笑声。啊，秋天的景色真美啊！

练手的一套项目 react+ts 虽然内容较少，但是干货挺多，尤其是对hooks的封装，ts的泛型的理解，使用更上一层楼项目代码：https://gitee.com/fine509/react_jiar

效果图

这是三个主要页面，还有一些小细节

等等

一些值得注意的地方（只是讲大概的功能，没有具体的详解怎么用）

使用错误边界处理，getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。

useSearchParams的使用

这个api可以获取和设置我们这里的params。

react-query的使用

这个库网上对他的介绍是用来管理服务端数据的状态管理库，他好像有点类似于redux，但是不用编写很多的actions,reducer，支持异步请求，用key唯一标识数据，存在一个类似于全局状态管理库的地方。特别适合用于某些表格，比如增删改改查这些，而且也很支持乐观更新。思路就是比如增删改查，再发送数据的那一刻直接拿到原来的数据，通过自己编写的逻辑代码，获取到增删改查后的数据，然后直接渲染到页面，看上去就像是直接更新了一样，实际上是先渲染，后台再自己发送请求，当失败的时候，你也可以拿到原始的数据然后重新渲染到页面去，再提示失败。最后就是我做这个项目特别纠结的一点，数据的管理。

我首先是自己封装了一个hooks。