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é)
等等
一些值得注意的地方（只是講大概的功能，沒有具體的詳解怎么用）
使用錯(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 Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09
React中進(jìn)行條件渲染的實(shí)現(xiàn)方法
React是一種流行的JavaScript庫(kù),它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個(gè)非常重要的概念,它允許我們根據(jù)不同的條件來(lái)呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了react native 仿微信聊天室實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
react后臺(tái)系統(tǒng)最佳實(shí)踐示例詳解
這篇文章主要為大家介紹了react后臺(tái)系統(tǒng)最佳實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了React降級(jí)配置及Ant Design配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了React組件間傳值及跨組件通信的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
react-intl實(shí)現(xiàn)React國(guó)際化多語(yǔ)言的方法
這篇文章主要介紹了react-intl實(shí)現(xiàn)React國(guó)際化多語(yǔ)言的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
React中super()和super(props)的區(qū)別小結(jié)
本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
在大型Web應(yīng)用中，一個(gè)常見的設(shè)計(jì)需求是讓某些組件具有吸頂效果，這意味著當(dāng)頁(yè)面向下滾動(dòng)時(shí)，該組件會(huì)保持在屏幕頂部，在本文中，我們將介紹如何在React項(xiàng)目中實(shí)現(xiàn)吸頂效果。我們將首先討論使用原生JavaScript領(lǐng)域的方法來(lái)實(shí)現(xiàn)，然后將這些方法與React結(jié)合起來(lái)2023-06-06