用自定義鉤檢測React中的移動設備

>現代響應式Web設計通常需要根據用戶是否在移動設備上的用戶來調整React應用程序。當CSS媒體查詢處理樣式時，JavaScript提供了動態的屏幕寬度檢測，以進行有條件的渲染和行為調整。本文演示了一個自定義的React Hook，useIsMobile，以進行有效的移動設備檢測。

---

為什麼用於移動檢測的JavaScript？ > CSS媒體查詢在樣式方面表現出色，但缺乏根據屏幕尺寸有條件執行JavaScript的能力。 JavaScript方法至關重要：>

✅動態顯示/隱藏UI元素（例如，移動菜單）。 ✅通過避免在較小的屏幕上避免不必要的渲染來優化性能。 ✅將應用程序行為適應屏幕大小（例如，在移動設備上禁用動畫）。

構建

鉤

---

此反應掛鉤確定屏幕寬度是否低於定義的斷點：> useIsMobile

代碼崩潰

<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. （最大寬度：$ {Mobile_breakpoint -1} px）

   >創建一個媒體查詢匹配的屏幕比斷點窄（默認為768px ）。 > window.matchMedia() const mql = window.matchMedia(>);事件偵聽器：

添加事件偵聽器以檢測屏幕尺寸更改。
3. 函數直接更新

   。 mql.addEventListener("change", onChange);onChange清理：isMobilemql.matches>當組件卸下時刪除偵聽器，防止內存洩漏。

4. 布爾返回：return () => mql.removeEventListener("change", onChange);>返回代表移動狀態的布爾值。

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>

使用

進行優化的性能。 可重複使用的：

>

---

輕鬆地整合了多個組件。 ✅

實時更新：在屏幕尺寸更改上動態更新。 ✅可自定義：

斷點是可配置的。

> window.matchMedia結論基於JavaScript的屏幕尺寸檢測對於創建真正響應的反應應用程序很有價值。

鉤為移動設備檢測提供了乾淨有效的解決方案，從而實現了動態UI調整。

以上是用自定義鉤檢測React中的移動設備的詳細內容。更多資訊請關注PHP中文網其他相關文章！