Mengesan peranti mudah alih dalam bertindak balas dengan cangkuk tersuai

Reka bentuk web responsif moden sering memerlukan menyesuaikan aplikasi React berdasarkan sama ada pengguna berada pada peranti mudah alih. Walaupun pertanyaan media CSS mengendalikan gaya, JavaScript menawarkan pengesanan lebar skrin dinamik untuk pelarasan rendering dan tingkah laku bersyarat. Artikel ini menunjukkan cangkuk React Custom,

, untuk pengesanan peranti mudah alih yang cekap. useIsMobile

---

Mengapa JavaScript untuk Pengesanan Mudah Alih?

pertanyaan media CSS Excel pada gaya, tetapi kekurangan keupayaan untuk melaksanakan javascript berdasarkan saiz skrin. Pendekatan JavaScript adalah penting untuk:

✅ dinamik menunjukkan/menyembunyikan elemen UI (mis., Menu mudah alih). ✅ Mengoptimumkan prestasi dengan mengelakkan rendering yang tidak perlu pada skrin yang lebih kecil. ✅ Mengadaptasi tingkah laku aplikasi ke saiz skrin (mis., Melumpuhkan animasi pada mudah alih).

---

Membina Hook useIsMobile

cangkuk reaksi ini menentukan jika lebar skrin berada di bawah titik putus yang ditetapkan:

<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>

---

pecahan kod

1. Inisialisasi Negeri: Inisialisasi keadaan ke const [isMobile, setIsMobile] = useState(undefined);. undefined

2. : window.matchMedia() (max -width: $ {mobile_breakpoint - 1} px) const mql = window.matchMedia( Membuat skrin padanan pertanyaan media lebih sempit daripada titik break (lalai 768px). );

3. pendengar acara:

   Menambah pendengar acara untuk mengesan perubahan saiz skrin. Fungsi secara langsung mengemas kini mql.addEventListener("change", onChange); dengan onChange. isMobile mql.matches

4. CLEANUP:

   menghilangkan pendengar apabila komponen tidak dapat dipisahkan, menghalang kebocoran memori. return () => mql.removeEventListener("change", onChange);

5. pulangan boolean:

   mengembalikan boolean yang mewakili status mudah alih. return !!isMobile;

---

menggunakan

dalam komponen useIsMobile inilah cara mengintegrasikan cangkuk:

Ini menjadikan mesej yang berbeza berdasarkan saiz skrin yang dikesan.

<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>

---

Kelebihan

✅

ringan dan cekap:

Menggunakan untuk prestasi yang dioptimumkan. ✅ boleh diguna semula: window.matchMedia mudah diintegrasikan merentasi pelbagai komponen. ✅ kemas kini masa nyata: kemas kini dinamik pada perubahan saiz skrin. ✅ disesuaikan: Breakpoint boleh dikonfigurasikan.

---

Kesimpulan

Pengesanan saiz skrin berasaskan JavaScript adalah sangat berharga untuk membuat aplikasi reaksi yang benar-benar responsif. Hook useIsMobile menyediakan penyelesaian yang bersih dan cekap untuk pengesanan peranti mudah alih, membolehkan pelarasan UI dinamik.

Atas ialah kandungan terperinci Mengesan peranti mudah alih dalam bertindak balas dengan cangkuk tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!