Melanggan API Pelayar

Pertanyaan media pelayar ialah contoh stor luaran yang sangat sesuai. Anda boleh melanggan pertanyaan matchMedia untuk mod gelap atau titik putus dan memaparkan semula komponen setiap kali status padanan berubah.

Fungsi langganan menambah pendengar perubahan pada MediaQueryList, manakala getSnapshot memulangkan nilai benar atau palsu padanan semasanya, lalu memberikan anda akses reaktif kepada keadaan responsif.

Membungkus logik itu ke dalam cangkuk useMediaQuery membolehkan komponen bertanya sama ada sesuatu pertanyaan sepadan hanya dengan satu panggilan. Cangkuk ini membina fungsi langganan dan getSnapshot yang stabil berdasarkan rentetan pertanyaan tertentu.

Hasilnya ialah primitif yang kemas dan boleh digunakan semula untuk tingkah laku responsif, serta kekal konsisten semasa pemaparan serentak berkat useSyncExternalStore.

Pelayar menyediakan peristiwa dalam talian dan luar talian serta navigator.onLine. Dengan melanggan peristiwa tersebut dan membaca sifat itu, anda memperoleh status sambungan langsung di dalam React.

getSnapshot memulangkan navigator.onLine, manakala fungsi langganan melampirkan pendengar untuk peristiwa dalam talian dan luar talian supaya komponen dikemas kini apabila sambungan berubah.

Menggabungkan logik itu ke dalam cangkuk useOnlineStatus membolehkan mana-mana komponen memaparkan sepanduk luar talian atau melumpuhkan tindakan apabila rangkaian terputus. Dokumentasi rasmi React menggunakan contoh tepat ini untuk menerangkan cangkuk tersebut.

Ini ialah contoh kecil tetapi jelas tentang cara isyarat pelayar luaran boleh dipetakan dengan kemas kepada sebahagian keadaan reaktif.

Anda boleh melanggan perubahan navigasi dengan mendengar peristiwa perubahan sejarah dan membaca window.location dalam getSnapshot. Perkara ini menjadi asas kepada penghala tersuai ringkas yang dibina menggunakan API Sejarah.

Oleh sebab pushState tidak menghasilkan peristiwa perubahan sejarah, penghala tersuai sering mencetuskan peristiwa sendiri supaya petikan dikemas kini semasa navigasi terprogram juga.

Peristiwa storan dicetuskan dalam tab lain apabila localStorage berubah, menjadikannya stor luaran yang boleh anda langgani. getSnapshot membaca nilai semasa, manakala fungsi langganan mendengar peristiwa storan.

Hal ini membolehkan penyegerakan rentas tab, iaitu pengemaskinian nilai dalam satu tab mengemas kini komponen secara reaktif dalam tab yang lain.

Peristiwa deviceorientation melaporkan kecondongan fizikal peranti. Dengan melanggannya dan membaca sudut terkini dalam getSnapshot, data pergerakan boleh dijadikan keadaan reaktif.

Hal ini berguna untuk kesan paralaks atau visualisasi interaktif yang bertindak balas terhadap cara telefon dipegang.

IntersectionObserver memberitahu anda apabila sesuatu elemen memasuki atau meninggalkan kawasan pandangan. Anda boleh membungkusnya supaya fungsi langganan mencipta pemerhati dan getSnapshot memulangkan nilai isIntersecting terkini.

Hasilnya ialah penunjuk isVisible reaktif untuk pemuatan tertunda imej, pencetusan animasi atau pelaksanaan penanda tatalan tanpa penghujung.

ResizeObserver melaporkan perubahan saiz elemen. Dengan membungkusnya, fungsi langganan boleh memerhati elemen dan getSnapshot memulangkan dimensinya semasa, supaya komponen bertindak balas dengan tepat terhadap perubahan susun atur.

Kaedah ini lebih cekap dan tepat daripada mendengar perubahan saiz tetingkap apabila anda mengambil berat tentang elemen tertentu dan bukannya seluruh kawasan pandangan.

Anda boleh menggabungkan peristiwa perubahan saiz dengan cangkuk ini untuk membina useWindowSize yang memulangkan lebar dan tinggi semasa. Fungsi langganan melampirkan pendengar perubahan saiz, manakala getSnapshot membaca dimensi tetingkap.

Ingat untuk memulangkan petikan yang stabil dengan menyimpan objek saiz dalam ingatan sementara supaya dimensi yang tidak berubah tidak menyebabkan pemaparan semula, sekali gus memastikan penggabungan kekal cekap.

Banyak API pelayar ialah stor luaran yang boleh disambungkan melalui useSyncExternalStore: matchMedia untuk titik putus, navigator.onLine untuk sambungan, lokasi dan storan untuk navigasi serta penyegerakan rentas tab, di samping pemerhati orientasi, persilangan dan perubahan saiz.

Setiap satunya mengikut bentuk yang sama, iaitu fungsi langganan yang melampirkan dan menanggalkan pendengar serta getSnapshot yang stabil. Gabungkan semuanya ke dalam cangkuk seperti useMediaQuery, useOnlineStatus dan useWindowSize.