react+ts實(shí)現簡(jiǎn)單jira項目的最佳實(shí)踐記錄

練手的一套項目
react+ts
雖然內容較少，但是干貨挺多，尤其是對hooks的封裝，ts的泛型的理解，使用更上一層樓
項目代碼：https://gitee.com/fine509/react_jiar

效果圖

這是三個(gè)主要頁(yè)面，還有一些小細節

等等

一些值得注意的地方（只是講大概的功能，沒(méi)有具體的詳解怎么用）

使用錯誤邊界處理，getDerivedStateFromError來(lái)處理當某個(gè)頁(yè)面某處地方有報錯的時(shí)候顯示報錯組件而不是掛掉。

useSearchParams的使用

這個(gè)api可以獲取和設置我們這里的params。

react-query的使用

這個(gè)庫網(wǎng)上對他的介紹是用來(lái)管理服務(wù)端數據的狀態(tài)管理庫，他好像有點(diǎn)類(lèi)似于redux，但是不用編寫(xiě)很多的actions,reducer，支持異步請求，用key唯一標識數據，存在一個(gè)類(lèi)似于全局狀態(tài)管理庫的地方。特別適合用于某些表格，比如增刪改改查這些，而且也很支持樂(lè )觀(guān)更新。 思路就是 比如增刪改查，再發(fā)送數據的那一刻直接拿到原來(lái)的數據，通過(guò)自己編寫(xiě)的邏輯代碼，獲取到增刪改查后的數據，然后直接渲染到頁(yè)面，看上去就像是直接更新了一樣，實(shí)際上是先渲染，后臺再自己發(fā)送請求，當失敗的時(shí)候，你也可以拿到原始的數據然后重新渲染到頁(yè)面去，再提示失敗。 最后就是我做這個(gè)項目特別糾結的一點(diǎn)，數據的管理。

我首先是自己封裝了一個(gè)hooks。

我的思路是，一個(gè)頁(yè)面可能要獲取很多數據，那么Loading這些如果自己寫(xiě)很麻煩，還有多個(gè)，為什么loading不能統一管理呢，然后data就設為一個(gè)對象，在使用的時(shí)候你可以傳一個(gè)類(lèi)型過(guò)來(lái)定義你這個(gè)data的類(lèi)型

然后sendHttp用來(lái)發(fā)送數據

接受兩個(gè)參數，第二個(gè)參數是當前的數據要放在data的哪個(gè)屬性上，

使用效果就是

這樣就可以統一管理這些數據的狀態(tài)，但后面發(fā)現用起來(lái)也是很麻煩。所以我又放棄了，還是原生的寫(xiě)起來(lái)舒服啊
直接定義接口

直接使用

害，當然我也想到用redux，但是redux很多都要編寫(xiě)action，reducer這些，也是很繁瑣。
最近聽(tīng)朋友說(shuō)ahooks的usequest也不錯，下個(gè)項目試試。

最后這個(gè)項目學(xué)到最多的就是封裝各種hooks

封裝redux的

封裝請求的

還有就是ts的學(xué)習，

看到不懂得api就直接類(lèi)型定義點(diǎn)進(jìn)去

像這種不懂就點(diǎn)進(jìn)去，一個(gè)一個(gè)點(diǎn)擊去

在這種狂轟亂炸的情況下，會(huì )慢慢了解泛型的使用

到此這篇關(guān)于react+ts實(shí)現簡(jiǎn)單jira項目的文章就介紹到這了,更多相關(guān)react+ts jira項目?jì)热菡埶阉髂_本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！