Lastor - p/p62ilx - 讀噗

@Lastor

說

Mon, Feb 20, 2023 11:38 AM

1

coding React Query 這個 fetch lib 是真的不錯啊，這一兩天一直在學習可以怎麼運用他。會很希望 Vue 也有一套對標的 lib

@Lastor

說

Mon, Feb 20, 2023 11:40 AM

這玩意的基本操作並不難，跟 axios 的概念差不多，只是他把很多 isLoading, isFetched 這類狀態判斷都幫我們做好了，可以少寫很多 code

@Lastor

說

Mon, Feb 20, 2023 11:40 AM

而他比較難的地方是在於它在 cache 方面的基礎知識要有，才會知道這套件到底在幹嘛

@Lastor

說

Mon, Feb 20, 2023 11:41 AM

request cache 的機制其實瀏覽器原生就有的樣子，只是寫起來很麻煩，這方面的相關功能好像有個術語來著，只是名子太長我一直記不起來

@Lastor

說

Mon, Feb 20, 2023 11:42 AM

React Query 就是幫忙把這些東西都封裝好，可以用很簡單的方式去做設定。大致上是把 request 下來的 data 區分成兩種狀態

@Lastor

說

Mon, Feb 20, 2023 11:43 AM

一種是 staleTime (新鮮度?) 另一個就是常見的存活時間 cacheTime 的概念

@Lastor

說

Mon, Feb 20, 2023 11:44 AM

cacheTime 比較好理解，例如設定 5min，那 5min 到了就會把這個緩存清掉，重新 fetch

@Lastor

說

Mon, Feb 20, 2023 11:45 AM

可是這樣做其實靈活度就會不夠，如果 5min 內好死不死重要的 data 被更新了，那就很尷尬了

@Lastor

說

Mon, Feb 20, 2023 11:46 AM

所以多弄了一層 stale 新鮮度的概念，就只是多給一個閥值去控制 refetch 的時間

@Lastor

說

Mon, Feb 20, 2023 11:47 AM

例如 cacheTime 設定 5min，而 staleTime 設定 1min

@Lastor

說

Mon, Feb 20, 2023 11:47 AM

那 0 ~ 1min 的期間，就完全不會 refresh，全部都拿緩存來用

@Lastor

說

Mon, Feb 20, 2023 11:48 AM

1 ~ 5min 的期間，如果 app 調用了 fetch 函式，他會優先吐緩存出來，然後在背景去 refetch

@Lastor

說

Mon, Feb 20, 2023 11:49 AM

抓下新的資料之後，跟現在的資料比對，如果內容一樣就不更新。如果內容變了，就更新緩存，然後 re-render

@Lastor

說

Mon, Feb 20, 2023 11:50 AM

他概念其實就這樣而已，但這種越是單純的玩意，其實要運用的好會很複雜

@Lastor

說

Mon, Feb 20, 2023 11:51 AM

例如要把 fetch 下來的 data 雙綁到 input value 上面，這時候學問就多了

@Lastor

說

Mon, Feb 20, 2023 11:52 AM

這個也只能實戰的時候去累積經驗了，目前是看到一些心得是說，要把 server state (fetched data) 跟 client state 做隔離

@Lastor

說

Mon, Feb 20, 2023 11:53 AM

如果拉下來之後直接往 setState 塞，後續會很難控制 state 的變化

@Lastor

說

Mon, Feb 20, 2023 11:53 AM

~~React 真的毛太多~~

@doomleika

Mon, Feb 20, 2023 11:57 AM

我覺得react算是工程過度的典範，切得很乾淨，沒錯，但結果就是做甚麼就是一堆boilerplate

@Lastor

說

Mon, Feb 20, 2023 12:06 PM

doomleika : 公司有一位資深前端一直在遊說主管說要改 React，現在就是他遊說成功，主管本身也想試試 React，所以新專案決定用 React 下去做

@Lastor

說

Mon, Feb 20, 2023 12:06 PM

只是他遊說的 React 優點，裡面有一項是說「React 開發會比 Vue 快，比較容易」，這我強烈不認同

@Lastor

說

Mon, Feb 20, 2023 12:08 PM

不過有機會能用 React 寫比較中大型的專案，也是不錯的學習機會。反正本就已經是雙刀流了，而且專案基座決定給我弄，我當然非常開心

載入新的回覆