在本文中,我们将了解 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中文网其他相关文章!