사용자 정의 후크와 반응하는 모바일 장치 감지

최신 반응 형 웹 디자인은 종종 사용자가 모바일 장치에 있는지 여부에 따라 React Applications를 조정해야합니다. CSS 미디어 쿼리는 스타일링을 처리하지만 JavaScript는 조건부 렌더링 및 동작 조정을위한 동적 화면 너비 감지를 제공합니다. 이 기사는 효율적인 모바일 장치 감지를 위해 맞춤형 반응 후크 를 보여줍니다.

왜 모바일 탐지를위한 JavaScript가? useIsMobile

CSS 미디어 쿼리는 스타일에서 탁월하지만 화면 크기에 따라 조건부로 JavaScript를 실행할 수있는 기능이 부족합니다. JavaScript 접근법은 다음과 같습니다 UI 요소 (예 : 모바일 메뉴)를 동적으로 표시/숨기는 것. screen 더 작은 화면에서 불필요한 렌더링을 피함으로써 성능을 최적화합니다. ✅ 스크린 크기에 응용 프로그램 동작을 적용합니다 (예 : 모바일에서 애니메이션 비활성화).

---

hook 빌딩 이 반응 후크는 화면 너비가 정의 된 중단 점보다 아래에 있는지 확인합니다.

코드 고장

상태 초기화 :

상태를 로 초기화합니다

useIsMobile :

(max -width : $ {mobile_breakpoint -1} px)

> 미디어 쿼리 일치 화면이 중단 점보다 좁아집니다 (기본 768px).

<code class="language-javascript">import { useEffect, useState } from "react";

export function useIsMobile(MOBILE_BREAKPOINT = 768) {
  const [isMobile, setIsMobile] = useState(undefined);

  useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = () => setIsMobile(mql.matches);

    mql.addEventListener("change", onChange);
    return () => mql.removeEventListener("change", onChange);
  }, [MOBILE_BREAKPOINT]);

  return !!isMobile;
}</code>

이벤트 리스너 :

---

화면 크기 변경을 감지하기 위해 이벤트 리스너를 추가합니다. 함수는 로 직접 업데이트됩니다 정리 :

1. 구성 요소가 마운트를 마치면 리스너를 제거하여 메모리 누출을 방지합니다.

   부울 반환 : const [isMobile, setIsMobile] = useState(undefined); 모바일 상태를 나타내는 부울을 반환합니다 undefined

구성 요소에서
2. 를 사용하여

   여기 후크를 통합하는 방법은 다음과 같습니다 이것은 감지 된 화면 크기에 따라 다른 메시지를 렌더링합니다. window.matchMedia() 장점 const mql = window.matchMedia( ✅ ); 경량적이고 효율적인 :

   최적화 된 성능을 위해
를 사용합니다. ✅ 재사용 가능 :
3. 여러 구성 요소에 쉽게 통합됩니다. 실시간 업데이트 :

   화면 크기 변경에 대한 동적 업데이트. ✅ 사용자 정의 가능 : 중단 점은 구성 가능합니다 결론 mql.addEventListener("change", onChange); JavaScript 기반 화면 크기 감지는 진정한 반응 형 RECT 응용 프로그램을 만드는 데 유용합니다. Hook는 모바일 장치 감지를위한 깨끗하고 효율적인 솔루션을 제공하여 동적 UI 조정을 가능하게합니다.

위 내용은 사용자 정의 후크와 반응하는 모바일 장치 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!