Selain-API-rajapintojen tilaaminen

Selaimen media queryt ovat täydellinen esimerkki ulkoisesta storesta. Voitte tilata dark mode -tilaa tai breakpointia vastaavan matchMedia-kyselyn ja renderöidä komponentin uudelleen aina match-tilan vaihtuessa.

Subscribe-funktio lisää muutosten kuuntelijan MediaQueryList-olioon, ja getSnapshot palauttaa sen nykyisen matches-totuusarvon, jolloin responsiivisiin ehtoihin saadaan reaktiivinen yhteys.

Kokoamalla tämän logiikan useMediaQuery-hookiksi komponentit voivat kysyä yhdellä kutsulla, vastaako kysely ehtoa. Hook rakentaa vakaan subscriben ja getSnapshotin annetun kyselymerkkijonon ympärille.

Tuloksena on selkeä ja uudelleenkäytettävä perusratkaisu responsiiviseen toimintaan, joka säilyy yhtenäisenä samanaikaisessa renderöinnissä useSyncExternalStoren ansiosta.

getSnapshot palauttaa navigator.onLinen, ja subscribe liittää kuuntelijat online- ja offline-tapahtumiin, jolloin komponentti päivittyy yhteyden tilan muuttuessa.

Kokoamalla tämän useOnlineStatus-hookiksi mikä tahansa komponentti voi näyttää offline-ilmoituksia tai poistaa toimintoja käytöstä verkkoyhteyden katketessa. Virallinen React-dokumentaatio käyttää juuri tätä esimerkkiä hookin esittelyyn.

Kyse on pienestä mutta havainnollisesta tapauksesta, jossa selaimen ulkoinen signaali voidaan yhdistää selkeästi reaktiivisen tilan osaksi.

Voitte tilata navigointimuutoksia kuuntelemalla popstate-tapahtumaa ja lukemalla window.locationin getSnapshotissa. Tämä muodostaa History API:n päälle rakennettujen yksinkertaisten mukautettujen reitittimien perustan.

Koska pushState ei lähetä popstate-tapahtumaa, mukautetut reitittimet lähettävät usein oman tapahtumansa, jotta snapshot päivittyy myös ohjelmallisen navigoinnin yhteydessä.

storage-tapahtuma laukeaa muissa välilehdissä, kun localStorage muuttuu, joten siihen voi tilata kuten ulkoiseen storeen. getSnapshot lukee nykyisen arvon, ja subscribe kuuntelee storage-tapahtumia.

Tämä mahdollistaa välilehtien välisen synkronoinnin: yhdessä välilehdessä päivitetty arvo päivittää reaktiivisesti komponentit toisessa välilehdessä.

deviceorientation-tapahtuma ilmoittaa laitteen fyysisen kallistuksen. Tilaamalla tapahtuman ja lukemalla uusimmat kulmat getSnapshotissa liike- ja asentotiedot voidaan muuttaa reaktiiviseksi tilaksi.

Tämä on hyödyllistä parallaksiefekteissä ja interaktiivisissa visualisoinneissa, jotka reagoivat puhelimen asentoon.

IntersectionObserver ilmoittaa, kun elementti tulee näkyviin näkymäalueelle tai poistuu sieltä. Voitte kääriä sen niin, että subscribe luo observerin ja getSnapshot palauttaa uusimman isIntersecting-arvon.

Tuloksena on reaktiivinen isVisible-lippu kuvien laiskaan lataamiseen, animaatioiden käynnistämiseen tai loputtoman vierityksen rajapyykkien toteuttamiseen.

ResizeObserver raportoi elementin koon muutokset. Sen ympärille rakennettuna subscribe tarkkailee elementtiä ja getSnapshot palauttaa sen nykyiset mitat, joten komponentit reagoivat asettelun muutoksiin täsmällisesti.

Tämä on tehokkaampi ja tarkempi ratkaisu kuin window resize -tapahtuman kuunteleminen, kun haluatte seurata tiettyä elementtiä koko näkymäalueen sijaan.

Voitte yhdistää resize-tapahtuman hookiin ja rakentaa useWindowSize-hookin, joka palauttaa nykyisen leveyden ja korkeuden. Subscribe liittää resize-kuuntelijan, ja getSnapshot lukee windowin mitat.

Muistakaa palauttaa vakaa snapshot: välimuistittakaa koko-olio, jotta muuttumattomat mitat eivät aiheuta uudelleenrenderöintejä ja koostaminen säilyy tehokkaana.

Monet selaimen rajapinnat ovat ulkoisia storeja, jotka voitte yhdistää useSyncExternalStorella: matchMedia breakpointteja varten, navigator.onLine yhteyden tilaa varten, location ja storage navigointiin ja välilehtien väliseen synkronointiin sekä orientation-, intersection- ja resize-observerit.

Kaikissa on sama rakenne: subscribe, joka liittää ja poistaa kuuntelijat, sekä vakaa getSnapshot. Koostakaa niistä hookeja, kuten useMediaQuery, useOnlineStatus ja useWindowSize.