」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 狀態原始碼中的 useDebugValue 用法已解釋。

狀態原始碼中的 useDebugValue 用法已解釋。

發佈於2024-11-03
瀏覽:736

在這篇文章中,我們將了解Zustand原始碼中如何使用useDebugValue。

useDebugValue usage in Zustand source code explained.

useDebugValue 在名為 useStoreWithEquality 的函數中使用。 useDebugValue 是一個 React Hook,可讓您在 React DevTools 中為自訂 Hook 新增標籤。

在自訂 Hook 的頂層呼叫 useDebugValue 以顯示可讀的偵錯值:

// Pulled from https://react.dev/reference/react/useDebugValue
import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

useDebugValue usage in Zustand source code explained.

在 Zustand 中,useDebugValue 用於切片對象,如下所示:

const slice = useSyncExternalStoreWithSelector(
  api.subscribe,
  api.getState,
  api.getInitialState,
  selector,
  equalityFn,
)

useDebugValue 也用於 src/react.ts

關於我們:

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

透過在 Next.js/React 中練習高階架構概念,提升您的程式設計技能,學習最佳實踐並建立生產級專案。

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

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

參考:

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

  2. https://react.dev/reference/react/useDebugValue

  3. https://github.com/pmndrs/zustand/blob/0a4f9d0f71477c5ef399191acc19e25674d0d3c4/src/react.ts#L42



版本聲明 本文轉載於:https://dev.to/thinkthroo/usedebugvalue-usage-in-zustand-source-code-explained-2j02?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3