Subskrybowanie API przeglądarki

Przeglądarkowe zapytania media są doskonałym przykładem zewnętrznego store'a. Można subskrybować zapytanie matchMedia dotyczące trybu ciemnego lub breakpointu i ponownie renderować komponent za każdym razem, gdy zmieni się stan dopasowania.

Funkcja subscribe dodaje listener zmiany do MediaQueryList, a getSnapshot zwraca bieżącą wartość logiczną matches, zapewniając reaktywny dostęp do warunków responsywności.

Opakowanie tej logiki w hook useMediaQuery pozwala komponentom sprawdzać dopasowanie zapytania za pomocą jednego wywołania. Hook tworzy stabilne subscribe i getSnapshot na podstawie danego ciągu zapytania.

Powstaje w ten sposób przejrzysty i wielokrotnego użytku prymityw do obsługi responsywności, który dzięki useSyncExternalStore zachowuje spójność podczas współbieżnego renderowania.

Przeglądarka udostępnia zdarzenia online i offline oraz właściwość navigator.onLine. Subskrybowanie tych zdarzeń i odczytywanie właściwości zapewnia aktualny stan połączenia wewnątrz Reacta.

getSnapshot zwraca navigator.onLine, a subscribe dołącza listenery zdarzeń online i offline, dzięki czemu komponent aktualizuje się wraz ze zmianami połączenia.

Połączenie tej logiki w hook useOnlineStatus pozwala dowolnemu komponentowi wyświetlać banery offline lub wyłączać działania po utracie połączenia sieciowego. Oficjalna dokumentacja Reacta wykorzystuje dokładnie ten przykład do zaprezentowania działania hooka.

To niewielki, ale obrazowy przypadek, w którym zewnętrzny sygnał przeglądarki można bezpośrednio odwzorować na fragment reaktywnego stanu.

Można subskrybować zmiany nawigacji, nasłuchując zdarzenia popstate i odczytując window.location w getSnapshot. Stanowi to podstawę prostych routerów niestandardowych zbudowanych na History API.

Ponieważ pushState nie emituje zdarzenia popstate, niestandardowe routery często wysyłają własne zdarzenie, aby snapshot aktualizował się również podczas nawigacji programowej.

Zdarzenie storage jest wywoływane w innych kartach, gdy zmienia się localStorage, dzięki czemu można subskrybować go jako zewnętrzny store. getSnapshot odczytuje bieżącą wartość, a subscribe nasłuchuje zdarzeń storage.

Umożliwia to synchronizację między kartami: aktualizacja wartości w jednej karcie reaktywnie aktualizuje komponenty w innej.

Zdarzenie deviceorientation informuje o fizycznym przechyleniu urządzenia. Subskrybowanie go i odczytywanie najnowszych kątów w getSnapshot zamienia dane o ruchu w reaktywny stan.

Jest to przydatne przy tworzeniu efektów paralaksy lub interaktywnych wizualizacji reagujących na sposób trzymania telefonu.

IntersectionObserver informuje, gdy element pojawia się w obszarze widocznym lub go opuszcza. Można go opakować tak, aby subscribe tworzyło obserwatora, a getSnapshot zwracało najnowszą wartość isIntersecting.

Zapewnia to reaktywną flagę isVisible na potrzeby leniwego ładowania obrazów, uruchamiania animacji lub implementowania znaczników nieskończonego przewijania.

ResizeObserver informuje o zmianach rozmiaru elementu. Jego opakowanie pozwala funkcji subscribe obserwować element, a getSnapshot zwracać jego bieżące wymiary, dzięki czemu komponenty precyzyjnie reagują na zmiany układu.

To rozwiązanie jest wydajniejsze i dokładniejsze niż nasłuchiwanie zmiany rozmiaru okna, gdy interesuje Państwa konkretny element, a nie cały obszar widoku.

Można połączyć zdarzenie zmiany rozmiaru z hookiem, aby utworzyć useWindowSize zwracający bieżącą szerokość i wysokość. subscribe dołącza listener zmiany rozmiaru, a getSnapshot odczytuje wymiary okna.

Należy pamiętać o zwracaniu stabilnego snapshotu i buforowaniu obiektu rozmiaru, aby niezmienione wymiary nie powodowały ponownego renderowania, dzięki czemu kompozycja pozostaje wydajna.

Proszę przeanalizować, jak hook useMediaQuery korzysta z hooka store'a.

Wiele API przeglądarki to zewnętrzne store'y, które można połączyć z Reactem za pomocą useSyncExternalStore: matchMedia obsługuje breakpointy, navigator.onLine — stan połączenia, location i storage — nawigację oraz synchronizację między kartami, a obserwatory orientation, intersection i resize — odpowiednio orientację, widoczność i rozmiar.

Każde z nich ma ten sam schemat: subscribe dołączające i usuwające listenery oraz stabilne getSnapshot. Można łączyć je w hooki takie jak useMediaQuery, useOnlineStatus i useWindowSize.