Tarayıcı API'lerine Abone Olma

Tarayıcı medya sorguları harici bir durum deposu için mükemmel bir örnektir. Karanlık mod veya kesme noktası için bir matchMedia sorgusuna abone olabilir ve eşleşme durumu her değiştiğinde yeniden oluşturabilirsiniz.

Abone olma işlevi MediaQueryList'e bir değişiklik dinleyicisi ekler, getSnapshot ise geçerli eşleşme doğru/yanlış değerini döndürür; böylece duyarlı koşullara reaktif erişim elde edersiniz.

Bu mantığı bir useMediaQuery kancasına sarmalamak, bileşenlerin tek bir çağrıyla bir sorgunun eşleşip eşleşmediğini sormasını sağlar. Kanca, verilen bir sorgu dizesi etrafında kararlı bir abone olma işlevi ve getSnapshot oluşturur.

Bu, useSyncExternalStore sayesinde eşzamanlı oluşturma altında tutarlılığını koruyan, duyarlı davranış için temiz ve yeniden kullanılabilir bir temel yapı sağlar.

Tarayıcı, çevrimiçi ve çevrimdışı olaylarını ve navigator.onLine değerini sunar. Bu olaylara abone olmak ve özelliği okumak, React içinde canlı bir bağlantı durumu elde etmenizi sağlar.

getSnapshot, navigator.onLine değerini döndürür; abone olma işlevi de çevrimiçi ve çevrimdışı olayları için dinleyiciler ekleyerek bağlantı değiştikçe bileşenin güncellenmesini sağlar.

Bunu bir useOnlineStatus kancasında birleştirmek, herhangi bir bileşenin ağ bağlantısı kesildiğinde çevrimdışı bildirimleri göstermesini veya işlemleri devre dışı bırakmasını sağlar. Resmî React belgeleri, kancayı göstermek için tam olarak bu örneği kullanır.

Bu, harici bir tarayıcı sinyalinin küçük ama açıklayıcı bir örnek olarak reaktif bir durum parçasına düzgünce dönüştürülebileceğini gösterir.

popstate olayını dinleyip getSnapshot içinde window.location değerini okuyarak gezinme değişikliklerine abone olabilirsiniz. Bu, History API üzerine kurulmuş basit özel yönlendiricilerin temelini oluşturur.

pushState, popstate olayı üretmediği için özel yönlendiriciler, programlı gezinmelerde de anlık görüntünün güncellenmesi amacıyla genellikle kendi olaylarını gönderir.

localStorage değiştiğinde diğer sekmelerde depolama olayı tetiklenir; bu da onu abone olabileceğiniz harici bir durum deposu hâline getirir. getSnapshot geçerli değeri okur, abone olma işlevi de depolama olaylarını dinler.

Bu, sekmeler arası eşzamanlamayı mümkün kılar: bir sekmede bir değerin güncellenmesi, diğer sekmedeki bileşenleri reaktif olarak günceller.

deviceOrientation olayı, bir cihazın fiziksel eğimini bildirir. Bu olaya abone olup getSnapshot içinde en son açıları okumak, hareket verilerini reaktif duruma dönüştürür.

Bu yaklaşım, telefonun nasıl tutulduğuna tepki veren paralaks efektleri veya etkileşimli görselleştirmeler için kullanışlıdır.

IntersectionObserver, bir öğenin görüntü alanına ne zaman girdiğini veya görüntü alanından ne zaman çıktığını bildirir. Bunu, abone olma işlevinin gözlemciyi oluşturduğu ve getSnapshot'un en son isIntersecting değerini döndürdüğü bir yapıya sarmalayabilirsiniz.

Bu, görselleri tembel yüklemek, animasyonları tetiklemek veya sonsuz kaydırma işaretçileri uygulamak için reaktif bir isVisible bayrağı sağlar.

ResizeObserver, öğe boyutundaki değişiklikleri bildirir. Bu işlevi sarmalamak, abone olma işlevinin bir öğeyi gözlemlemesini ve getSnapshot'un geçerli boyutlarını döndürmesini sağlar; böylece bileşenler yerleşim değişikliklerine hassas biçimde tepki verir.

Belirli bir öğeyle ilgilendiğinizde, tüm görüntü alanını izlemek yerine bu yaklaşım window resize olayını dinlemekten daha verimli ve doğrudur.

Geçerli genişlik ve yüksekliği döndüren bir useWindowSize oluşturmak için boyutlandırma olayını kancayla birleştirebilirsiniz. Abone olma işlevi bir boyutlandırma dinleyicisi ekler, getSnapshot ise pencere boyutlarını okur.

Kararlı bir anlık görüntü döndürmeyi unutmayın: boyut nesnesini önbelleğe alarak değişmemiş boyutların yeniden oluşturmalara neden olmamasını ve birleştirmenin verimli kalmasını sağlayın.

Bir useMediaQuery kancasının durum deposu kancasını nasıl kullandığını değerlendirin.

Birçok tarayıcı API'si useSyncExternalStore ile bağlayabileceğiniz harici durum depolarıdır: kesme noktaları için matchMedia, bağlantı için navigator.onLine, gezinme ve sekmeler arası eşzamanlama için konum ve depolama, ayrıca yön, kesişim ve boyutlandırma gözlemcileri.

Her biri aynı yapıyı izler: dinleyicileri ekleyip kaldıran bir abone olma işlevi ve kararlı bir getSnapshot. Bunları useMediaQuery, useOnlineStatus ve useWindowSize gibi kancalarda birleştirin.