カスタムフックで反応するモバイルデバイスの検出

最新のレスポンシブWebデザインでは、ユーザーがモバイルデバイスにいるかどうかに基づいてReactアプリケーションを適応させる必要があることがよくあります。 CSSメディアクエリはスタイリングを処理しますが、JavaScriptは条件付きレンダリングと動作調整のための動的な画面幅検出を提供します。この記事では、効率的なモバイルデバイス検出のためのカスタムReactフックuseIsMobileを示しています。

---

なぜモバイル検出のためのJavaScript？

CSSメディアクエリはスタイリングに優れていますが、画面のサイズに基づいてJavaScriptを条件付きで実行する機能がありません。 javaScriptアプローチは、

のために重要です

は、UI要素を動的に表示/非表示にします（モバイルメニューなど）。 small小規模な画面での不必要なレンダリングを回避することにより、パフォーマンスを最適化します。 creame画面サイズにアプリケーションの動作を適応させる（例：モバイルでアニメーションを無効にする）。

---

フックを構築しますuseIsMobile

このReactフックは、画面幅が定義されたブレークポイントを下回っているかどうかを判断します：

<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()（max -width：$ {mobile_breakpoint -1} px）const mql = window.matchMedia(>ブレークポイントよりも狭い画面を一致させるメディアクエリを作成します（デフォルト768px）。 );

3. イベントリスナー：

   イベントリスナーを追加して、画面サイズの変更を検出します。 関数は、mql.addEventListener("change", onChange); onChange isMobile mql.matches

   クリーンアップ：
4. コンポーネントがマウントされているときにリスナーを削除して、メモリの漏れを防ぎます。

   return () => mql.removeEventListener("change", onChange);booleanリターン：

モバイルステータスを表すブール値を返します

5. コンポーネントでreturn !!isMobile;を使用して

フックを統合する方法：

---

これにより、検出された画面サイズに基づいて異なるメッセージが表示されます。 useIsMobile

利点

<code class="language-javascript">import React from "react";
import { useIsMobile } from "./useIsMobile";

export default function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return (
    <div>
      {isMobile ? <p>Mobile Device ?</p> : <p>Desktop ?️</p>}
    </div>
  );
}</code>

✅

軽量で効率的：

最適化されたパフォーマンスに

---

を使用します。 ✅

再利用可能：複数のコンポーネントに簡単に統合できます。 ✅リアルタイムの更新：

画面サイズの変更について動的に更新します。 Customizable：ブレークポイントは構成可能です。

window.matchMedia結論

JavaScriptベースの画面サイズの検出は、真にレスポンシブなReactアプリケーションを作成するために価値があります。 useIsMobileフックは、モバイルデバイス検出のためのクリーンで効率的なソリューションを提供し、動的なUI調整を可能にします。

以上がカスタムフックで反応するモバイルデバイスの検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。