react+ts實(shí)現(xiàn)簡(jiǎn)單jira項(xiàng)目的最佳實(shí)踐記錄
練手的一套項(xiàng)目
react+ts
雖然內(nèi)容較少，但是干貨挺多，尤其是對(duì)hooks的封裝，ts的泛型的理解，使用更上一層樓
項(xiàng)目代碼：https://gitee.com/fine509/react_jiar
效果圖
這是三個(gè)主要頁(yè)面，還有一些小細(xì)節(jié)
等等
一些值得注意的地方（只是講大概的功能，沒(méi)有具體的詳解怎么用）
使用錯(cuò)誤邊界處理，getDerivedStateFromError來(lái)處理當(dāng)某個(gè)頁(yè)面某處地方有報(bào)錯(cuò)的時(shí)候顯示報(bào)錯(cuò)組件而不是掛掉。
useSearchParams的使用
這個(gè)api可以獲取和設(shè)置我們這里的params。
react-query的使用
這個(gè)庫(kù)網(wǎng)上對(duì)他的介紹是用來(lái)管理服務(wù)端數(shù)據(jù)的狀態(tài)管理庫(kù)，他好像有點(diǎn)類似于redux，但是不用編寫很多的actions,reducer，支持異步請(qǐng)求，用key唯一標(biāo)識(shí)數(shù)據(jù)，存在一個(gè)類似于全局狀態(tài)管理庫(kù)的地方。特別適合用于某些表格，比如增刪改改查這些，而且也很支持樂(lè)觀更新。 思路就是 比如增刪改查，再發(fā)送數(shù)據(jù)的那一刻直接拿到原來(lái)的數(shù)據(jù)，通過(guò)自己編寫的邏輯代碼，獲取到增刪改查后的數(shù)據(jù)，然后直接渲染到頁(yè)面，看上去就像是直接更新了一樣，實(shí)際上是先渲染，后臺(tái)再自己發(fā)送請(qǐng)求，當(dāng)失敗的時(shí)候，你也可以拿到原始的數(shù)據(jù)然后重新渲染到頁(yè)面去，再提示失敗。 最后就是我做這個(gè)項(xiàng)目特別糾結(jié)的一點(diǎn)，數(shù)據(jù)的管理。
我首先是自己封裝了一個(gè)hooks。
我的思路是，一個(gè)頁(yè)面可能要獲取很多數(shù)據(jù)，那么Loading這些如果自己寫很麻煩，還有多個(gè)，為什么loading不能統(tǒng)一管理呢，然后data就設(shè)為一個(gè)對(duì)象，在使用的時(shí)候你可以傳一個(gè)類型過(guò)來(lái)定義你這個(gè)data的類型
然后sendHttp用來(lái)發(fā)送數(shù)據(jù)
接受兩個(gè)參數(shù)，第二個(gè)參數(shù)是當(dāng)前的數(shù)據(jù)要放在data的哪個(gè)屬性上，
使用效果就是
這樣就可以統(tǒng)一管理這些數(shù)據(jù)的狀態(tài)，但后面發(fā)現(xiàn)用起來(lái)也是很麻煩。所以我又放棄了，還是原生的寫起來(lái)舒服啊
直接定義接口
直接使用
害，當(dāng)然我也想到用redux，但是redux很多都要編寫action，reducer這些，也是很繁瑣。
最近聽朋友說(shuō)ahooks的usequest也不錯(cuò)，下個(gè)項(xiàng)目試試。
最后這個(gè)項(xiàng)目學(xué)到最多的就是封裝各種hooks
封裝redux的
封裝請(qǐng)求的
還有就是ts的學(xué)習(xí)，
看到不懂得api就直接類型定義點(diǎn)進(jìn)去
像這種不懂就點(diǎn)進(jìn)去，一個(gè)一個(gè)點(diǎn)擊去
在這種狂轟亂炸的情況下，會(huì)慢慢了解泛型的使用
到此這篇關(guān)于react+ts實(shí)現(xiàn)簡(jiǎn)單jira項(xiàng)目的文章就介紹到這了,更多相關(guān)react+ts jira項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件
這篇文章主要介紹了React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了在 React 中使用 substring() 方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了如何在React中實(shí)現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對(duì)我們的學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以了解一下2023-03-03
本文主要介紹了react使用.env文件管理全局變量的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了React中如何使用scss問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了React Hooks的深入理解與使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果(樓梯效果)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果，樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了React文字展開收起組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
詳解react使用react-bootstrap當(dāng)輪子造車
本篇文章主要介紹了詳解react使用react-bootstrap當(dāng)輪子造車，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-08-08