> 웹 프론트엔드 > JS 튜토리얼 > 상태 소스 코드의 useDebugValue 사용법이 설명되었습니다.

상태 소스 코드의 useDebugValue 사용법이 설명되었습니다.

PHPz
풀어 주다: 2024-09-12 10:30:37
원래의
321명이 탐색했습니다.

이 글에서는 Zusstand 소스 코드에서 useDebugValue가 어떻게 사용되는지 알아보겠습니다.

useDebugValue usage in Zustand source code explained.

useDebugValue는 useStoreWithEquality라는 함수에서 사용됩니다. useDebugValue는 React DevTools의 사용자 정의 Hook에 라벨을 추가할 수 있는 React 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에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배로 늘리고 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo(별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 hello@thinkthroo.com으로 문의하세요!

참고자료:

  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



위 내용은 상태 소스 코드의 useDebugValue 사용법이 설명되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿