react+ts實現(xiàn)簡單jira項目的最佳實踐記錄_第1頁
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄_第2頁
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄_第3頁
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄_第4頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第react+ts實現(xiàn)簡單jira項目的最佳實踐記錄練手的一套項目

react+ts

雖然內容較少，但是干貨挺多，尤其是對hooks的封裝，ts的泛型的理解，使用更上一層樓

項目代碼：/fine509/react_jiar

效果圖

這是三個主要頁面，還有一些小細節(jié)

等等

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

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

useSearchParams的使用

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

react-query的使用

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

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

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

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

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

使用效果就是

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

直接定義接口

直接使用

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

最近聽朋友說ahooks的usequest也不錯，下個項目試試。

最后這個項目學到最多的就是封裝各種hooks

封裝redux的

封裝請求的

還有就是ts的學習，

看到不懂得api就直接類型定義

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論