1. 程式人生 > 程式設計 >react+ts實現簡單jira專案的最佳實踐記錄

react+ts實現簡單jira專案的最佳實踐記錄

練手的一套專案
react+ts
雖然內容較少,但是乾貨挺多,尤其是對hooks的封裝,ts的泛型的理解,使用更上一層樓
專案程式碼:https://gitee.com/fine509/react_jiar

效果圖

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

這是三個主要頁面,http://www.cppcns.com還有一些小細節

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
等等

一些值得注意的地方(只是講大概的功能,沒有具體的詳解怎麼用)

在這裡插入圖片描述

使用錯誤邊界處理,getDerivedStateFromError來處理當某個頁面某處地方有報錯的時候顯示報錯元件而不是掛掉。

useSearchParams的使用

在這裡插入圖片描述
在這裡插入圖片描述

這個api可以獲取和設定我們這裡的params。

react-query的使用

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

這個庫網上對他的介紹是用來管理服務端資料的狀態管理庫,他好像有點類似於redux,但是不用編寫很多的actions,reducer,支援非同步請求,用key唯一標識資料,存在一個類似於全域性狀態管理庫的地方。特別適合用於某些表格,比如增刪改改查這些,而且也很支援樂觀更新。 思路就是 比如增刪改查,再發送資料的那一刻直接拿到原來的資料,通過自己編寫的邏輯程式碼,獲取到增刪改查後的資料,然後直接渲染到頁面,看上去就像是直接更新了一樣,實際上是先渲染,後臺再自己傳送請求,當失敗的時候,你也可以拿到原始的資料然後重新渲染到頁面去,再提示失敗。 最後就是我做這個專案特別糾結的一點,資料的管理。

我首先是自己封裝了一個hooks。

在這裡插入圖片描述

我的思路是,一個頁http://www.cppcns.com面可能要獲取很多資料,那麼Loading這些如果自己寫很麻煩,還有多個,為什麼loading不能統一管理呢,然後data就設為一個物件,在使用的時候你可以傳一個型別過來定義你這個data的型別

在這裡插入圖片描述

然後sendHhttp://www.cppcns.comttp用來發送資料

在這裡插入圖片描述

接受兩個引數,第二個引數是當前的資料要放在data的哪個屬性上,

使用效果就是

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

這樣就可以統一管理這些資料的狀態,但後面發現用起來也是很麻煩。所以我又放棄了,還是原生的寫起來舒服啊
直接定義介面

在這裡插入圖片描述

直接使用

在這裡插入圖片描述

害,當然我也想到用redux,但是redux很多都要編寫action,reducer這些,也是很繁瑣。

最近聽朋友說ahooks的usequest也不錯,下個專案試試。

最後這個專案學到最多的就是封裝各種hooks

封裝redux的

react+ts實現簡單jira專案的最佳實踐記錄
在這裡插入圖片描述

封裝請求的

在這裡插入圖片描述

還有就是ts的學習,

看到不懂得api就直接型別定義點進去

在這裡插入圖片描述

像這種不懂就點進去,一個一個點選去

在這裡插入圖片描述

在這種狂轟亂炸的情況下,會慢慢了解泛型的使用

到此這篇關於react+ts實現簡單jira專案的文章就介紹到這了,更多相關react+ts jira專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文http://www.cppcns.com章希望大家以後多多支援我們!