我從react-query庫中看到了一個模式，它執行以下操作：
(面向物件)
// it instantiates an object from a class
const queryClient = new QueryClient()
（鉤子）
// Then it passes this object as a prop to the provider
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
在<Todos />組件中，這個庫讓你可以選擇使用客戶端或使用鉤子。
// 待辦事項
const client = useQueryClient(); // (Hook)
const query = useQuery( key, fn, option ); // (Hook)
我無法理解的是這個庫如何能夠在普通 javascript 類物件之間保持其狀態同步，即client和其他鉤子的使用。我的意思是，例如，您可以使用useQuery帶有 akey作為第一個引數的鉤子，這個鉤子的作用是執行fn函式并將結果存盤data在query.
有趣的是，您可以data通過從client.
const { data } = client.getState(key);
那么它實際上在幕后做了什么以保持經典的 javascript 物件和鉤子同步？
const client = useQueryClient(); // (Hook)
const query = useQuery( key, fn, option ); // (Hook)
// ----> in sync : query.data === client.getState(key).data
uj5u.com熱心網友回復：
因為事實的來源是查詢客戶端物件。它包含快取（還有類）和一堆訪問它們的方法等等。
我想你可以在某個模塊中實體化它，然后匯入它并訪問它，如果你想做的只是在某個物件的某個地方保持可變狀態。但部分魅力在于將快取函式的呼叫和該狀態的訪問結合起來做出反應：在組件掛載時呼叫查詢，并讓其他對相同結果感興趣的組件都等待相同的結果。讓新安裝的組件調查資料是否過時。在計時器上重新獲取資料，但對于所有組件僅重新獲取一個資料，依此類推。
通過鉤子集成到反應生命周期函式中（所有具有自尊的現代反應庫都必須有一些鉤子！），因為它們可以以一種簡單且宣告式的方式進入你的組件生命周期：“使用”一些資源。
然后這些鉤子使用 reacts 生命周期鉤子，以及 QueryClient 中的快取和方法。因為 QueryClientProvider 通過反應背景關系提供 queryClient，所以您不必在整個模塊中匯出/匯入實體化的 QueryClient，他們自己找到它。
模塊頂級中有一個小技巧在這里定義了反應背景關系
我做了一個小代碼和盒子，你可以在這里查看
如果你想復習觀察者模式，你可以在這里這樣做
并在沒有背景關系的應用程式狀態上與此演練進行比較。
另外，不要忘記使用物件參考作為函式引數會產生副作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381599.html
標籤：javascript 反应 哎呀 反应钩子 反应查询
上一篇：在帶有嵌套物件的json檔案中查找值或物件并將結果物件傳遞給Javascript中的子物件并做出反應
下一篇：JavaScript排序多個陣列