在本文中,我們將了解 Zustand 原始碼中如何使用 Set() 方法。
所以 Zustand 中的聽眾基本上就是一個 Set。上面的程式碼片段摘自 vanilla.ts
Set 物件可讓您儲存任何類型的唯一值,無論是原始值還是物件參考。集合物件是值的集合。集合中的值只能出現一次;它在該系列的收藏中是獨一無二的。您可以按插入順序迭代集合的元素。 — MDN 文檔
const mySet1 = new Set(); mySet1.add(1); // Set(1) { 1 } mySet1.add(5); // Set(2) { 1, 5 } mySet1.add(5); // Set(2) { 1, 5 } mySet1.add("some text"); // Set(3) { 1, 5, 'some text' } for (const item of mySet1) { console.log(item); } // 1, 5, 'some text'
在 Zustand 的 subscribe 函數中加入監聽器。讓我們仔細看看訂閱
React專案中如何使用subscribe?以下解釋摘自 Zustand 的自述文件。
訂閱功能允許元件綁定到狀態部分,而無需在變更時強制重新渲染。最好將其與 useEffect 結合起來,以便在卸載時自動取消訂閱。當您被允許直接改變視圖時,這可能會對效能產生巨大的影響。
const useScratchStore = create((set) => ({ scratches: 0, ... })) const Component = () => { // Fetch initial state const scratchRef = useRef(useScratchStore.getState().scratches) // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference useEffect(() => useScratchStore.subscribe( state => (scratchRef.current = state.scratches) ), []) ...
現在讓我們來看看 Zustand 中的訂閱原始碼。
const subscribe: StoreApi<TState>['subscribe'] = (listener) => { listeners.add(listener) // Unsubscribe return () => listeners.delete(listener) }
subscribe 只是將監聽器加入到監聽器集合中。
讓我們看看實驗日誌怎麼說。為了新增 console.log 語句,我使用指令 pnpm run build 編譯了 Zustand,並將 dist 複製到 Examples/demo/src 中。看起來很老套,但嘿,我們正在試驗並弄清楚 Zustand 的內部工作原理。
這就是監聽器集的樣子
我訂閱了 App.jsx 中的更改
// Subscribe to changes in the state useStore.subscribe((state) => { console.log("State changed: ", state); });
另一個觀察結果是,有一個額外的偵聽器加入此集合:
ƒ () { if (checkIfSnapshotChanged(inst)) { forceStoreRerender(fiber); } }
在 Think Throo,我們的使命是教授受開源專案啟發的最佳實踐。
透過在 Next.js/React 中練習高階架構概念,將您的編碼技能提高 10 倍,學習最佳實踐並建立生產級專案。
我們是開源的 — https://github.com/thinkthroo/thinkthroo (請給我們一顆星!)
想要為您的企業建立客製化網路系統?請透過 hello@thinkthroo.com 與我們聯絡
嘿,我是拉姆。我是一名充滿熱情的軟體工程師/OSS Tinkerer。
看我的網站:https://www.ramunarasinga.com/
https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L62
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
https://github.com/pmndrs/zustand/tree/main?tab=readme-ov-file#transient-updates-for-often-occurring-state-changes
以上是State 原始碼中的 Set() 用法。的詳細內容。更多資訊請關注PHP中文網其他相關文章!