首頁 web前端 js教程 useSyncExternalStoreExports在狀態原始碼中有解釋。

useSyncExternalStoreExports在狀態原始碼中有解釋。

Sep 10, 2024 am 11:06 AM

在本文中,我們將了解 Zustand 如何在其[原始碼]中使用 useSyncExternalStoreExports。

useSyncExternalStoreExports in Zustand source code explained.

useSyncExternalStoreExports 是從 use-sync-external-store/shim/with-selector 匯入的。 use-sync-external-store 是 React.useSyncExternalStore 的向後相容墊片,可與任何支援 Hooks 的 React 搭配使用。

讀到上面這句話,你可能會想知道什麼是useSyncExternalStore。

useSyncExternalStore

useSyncExternalStore 是一個 React Hook,可讓您訂閱外部儲存。

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
登入後複製

使用 useSyncExternalStore 從外部儲存讀取一個值,該值可以是:

  1. 在 React 之外保存狀態的第三方狀態管理庫。

  2. 公開可變值和事件以訂閱其更改的瀏覽器 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/extensions
import 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 } = ReactExports
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports
登入後複製

useSyncExternalStoreWithSelector 是從 useSyncExternalStoreExports 解構而來,並在 useStoreWithEqualityFn 中使用。

export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}
登入後複製

useSyncExternalStoreWithSelector 有 api.subscribe、api.getState、api.getInitialState、selector 和 equalFn。

關於我們:

在 Think Throo,我們的使命是教授受開源專案啟發的最佳實踐。

透過在 Next.js/React 中練習高階架構概念,將您的編碼技能提高 10 倍,學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo (請給我們一顆星!)

透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過 hello@thinkthroo.com 與我們聯繫以了解更多資訊!

參考資料:

  1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L44

  2. https://www.npmjs.com/package/use-sync-external-store

  3. https://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstore

  4. https://react.dev/reference/react/useSyncExternalStore

  5. https://github.com/reactwg/react-18/discussions/86



以上是useSyncExternalStoreExports在狀態原始碼中有解釋。的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

示例顏色json文件 示例顏色json文件 Mar 03, 2025 am 12:35 AM

示例顏色json文件

8令人驚嘆的jQuery頁面佈局插件 8令人驚嘆的jQuery頁面佈局插件 Mar 06, 2025 am 12:48 AM

8令人驚嘆的jQuery頁面佈局插件

10個jQuery語法熒光筆 10個jQuery語法熒光筆 Mar 02, 2025 am 12:32 AM

10個jQuery語法熒光筆

構建您自己的Ajax Web應用程序 構建您自己的Ajax Web應用程序 Mar 09, 2025 am 12:11 AM

構建您自己的Ajax Web應用程序

什麼是這個'在JavaScript? 什麼是這個'在JavaScript? Mar 04, 2025 am 01:15 AM

什麼是這個'在JavaScript?

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles