useSyncExternalStoreExports 狀態原始碼解釋

在本文中，我們將瞭解 zustand 如何在其[原始碼]中使用 usesyncexternalstoreexports。usesyncexternalstoreexports 是從 use-sync-external-store/shim/with-selector 匯入的。 use-sync-external-store 是 react.usesyncexternalstore 的向後相容墊片，可與任何支援 hooks 的 react 配合使用。讀到上面這句話，你可能想知道什麼是usesyncexternalstore。 usesyncexternalstoreusesyncexternalstore 是一個 react hook，可讓您訂閱外部儲存。const snapshot = usesyncexternalstore(subscribe, getsnapshot, getserversnapshot?)登入後複製使用 usesyncexternalstore 從外部儲存讀取一個值，該值可以是：在 react 之外儲存狀態的第三方狀態管理庫。公開可變值和事件以訂閱其更改的瀏覽器 api。 用法示例：import { usesyncexternalstore } from 'react';import { todosstore } from './todostore.js';function todosapp() { const todos = usesyncexternalstore(todosstore.subscribe, todosstore.getsnapshot); // ...}登入後複製上面的例子摘自react文件。 usesyncexternalstore 在 zustand 中的用法：zustand 在 src/traditional.ts 中使用 usesyncexternalstore。import reactexports from 'react'// eslint-disable-next-line import/extensionsimport usesyncexternalstoreexports from 'use-sync-external-store/shim/with-selector'import { createstore } from './vanilla.ts'import type { mutate, statecreator, storeapi, storemutatoridentifier,} from './vanilla.ts'const { usedebugvalue } = reactexportsconst { usesyncexternalstorewithselector } = usesyncexternalstoreexports登入後複製usesyncexternalstorewithselector 是從 usesyncexternalstoreexports 解構而來，並在 usestorewithequalityfn 中使用。export function useStoreWithEqualityFn<tstate stateslice>( api: ReadonlyStoreApi<tstate>, selector: (state: TState) =&gt; StateSlice = identity as any, equalityFn?: (a: StateSlice, b: StateSlice) =&gt; boolean,) { const slice = useSyncExternalStoreWithSelector( api.subscribe, api.getState, api.getInitialState, selector, equalityFn, ) useDebugValue(slice) return slice}</tstate></tstate>登入後複製usesyncexternalstorewithselector 有 api.subscribe、api.getstate、api.getinitialstate、selector 和 equalfn。 關於我們：在 think throo，我們的使命是教授受開源專案啟發的最佳實踐。透過在 next.js/react 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並構建生產級專案。我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）透過我們基於程式碼庫架構的高階課程來提高您的團隊的技能。請透過 hello@thinkthroo.com 聯絡我們以瞭解更多資訊！ 參考資料：https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#l44https://www.npmjs.com/package/use-sync-external-storehttps://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstorehttps://react.dev/reference/react/usesyncexternalstorehttps://github.com/reactwg/react-18/discussions/86 以上就是useSyncExternalStoreExports 狀態原始碼解釋的詳細內容，更多請關注我的其它相關文章！