Jak vytvořit jednoduchou reakcí komponentu, která sleduje "Stav viditelnosti stránky"

Při vytváření webové aplikace se můžete setkat s situacemi, kdy potřebujete sledovat aktuální stav viditelnosti. Stává se, že je třeba reprodukovat nebo pozastavit účinek animace nebo videa, snížit intenzitu nebo sledovat chování uživatele pro analytiku. Na první pohled se tato funkce zdá být poměrně jednoduché na prodej, ale není to tak docela. Sledování aktivity uživatele - poměrně složitý proces.

Existuje API viditelnost stránek, která funguje ve většině případů skvělé, ale nezpracovává veškerou možnou neviditelnost záložky prohlížeče. Viditelnost stránek API odesílá neviditelnost událostí tak, aby posluchači vědí, že stav viditelnosti stránek se změnil. Nezahrnuje událost v některých případech, pokud je okno nebo odpovídající karta prohlížeče skryto z dohledu. Chcete-li zpracovat některé z těchto případů, musíme použít kombinaci akcí zaměření a rozostření v dokumentu i okně.

Takže z tohoto článku se dozvíte, jak vytvořit jednoduchou komponentu reagovat, která sleduje stav viditelnosti stránek.

Kroky

Chcete-li vytvořit aplikaci Reagovat, použije se zde CodesAndBox (můžete také použít aplikaci Create-Reage-App). Vytvoříme malou aplikaci, ve které bude video prvky HTML5 přehrávána pouze v případě, že záložka prohlížeče je zaostřena nebo aktivní, jinak bude automaticky pozastavena. Video slouží k usnadnění testování aplikačních funkcí.

jeden. Začněte s vytvořením nejjednodušší části, tj. Video komponenty. Bude to jednoduchá součást s parametry Boolean Active a String SRC obsahující adresu URL pro video. Pokud je aktivní rekvizity pravdivé, bude přehráno video. Jinak bude zastaven.

Obrázek s názvem DisplayVisibilityutilsJSrcdirectory

2. Vytvořit jednoduchou reakcí třídu a prvek video s jeho zdrojovým kódem Hosting URL přenášený pomocí SRC. Zde je nový REF API připojením odkazů na video dom-uzel. Konfigurujete video na přehrávání AVTO, za předpokladu, že když spustíme aplikaci, bude stránka aktivní.

Safari automaticky nezahrne multimediální prvky bez interakce uživatele. Srovnávací metoda je velmi pohodlná při zpracování efektů při změně vlastnosti komponenty. Proto bude tato metoda použita zde pro přehrávání a pozastavení videa na základě aktuální hodnoty.Klady.Aktivní.

3. Vytvořit nástroj funkcí. Rozdíly v předponách prohlížeče nejsou vždy vhodné použít určité rozhraní API a jeden z nich. Vytvoříme jednoduchou užitnou funkci, která budou zpracovávat tyto rozdíly a vrátit jednu API na základě uživatelského prohlížeče. Vytvořte a exportujte tuto funkci z PageBribibilibleUutils.JS v adresáři SRC.

V této funkci použijeme prohlášení IF-ELESS pro vrácení rozhraní API specifické pro prohlížeč. Je vidět, že přidáváme předponu MS pro aplikaci Internet Explorer a předponu webkit pro prohlížeče webkitů. Budeme skladovat požadované API ve skrytých a viditelnost proměnných a vrátit je z funkce jako jednoduchý objekt. Konečně exportujeme funkci.

4. Přejděte do hlavní komponenty. Zapouštěvme všechna logika viditelnosti stránek v třídě třídy Reage pomocí šablony Render Props. Vytvořte komponentu třídy VisibilityManager. Tato komponenta bude zpracovávat přidat a odstranit všechny události na základě posluchačů dom.

Pět. Začněte importem dříve vytvořené pomocné funkce a zavolejte jej, abyste získali správné rozhraní rozhraní prohlížeče. Poté vytvořte komponentu reagovat a inicializujte svůj stav s jedním isvisible instalovaným vhodný. Toto booleovské pole bude zodpovědné za stav viditelnosti stránky.

Obrázek s názvem jeho.forcevisibilityTrue a this.forcevisibilityFalse

6. Ve složceDidMount přidat posluchač událostí do dokumentu pro aplikaci VisibilityChange pomocí této metody.Řízeníhodnostchange jako psovod. Také přidejte posluchač událostí pro zaostření a rozostření událostí v dokumentu, stejně jako prvek okna. Tentokrát to instalujeme.ForceVisibelnosti a to.SildVisableFalse jako obsluhy pro zaměření událostí a rozostření.

7. Poté vytvořte metodu řidítekhodnotnosti, která vyžaduje argument ForceFlag. Argument ForceFlag bude použit k určení, zda je metoda způsobena v důsledku události viditelnosti nebo zaostření a rozostření událostí. To je proto, že metody síly a donoritivu a donoritivisability metody neudělají nic kromě metody řetěznosti s pravou a nepravdou hodnotou pro boj.

osm. Uvnitř metody rukojetí, nejprve zkontrolujte, zda je hodnota logického argumentu ForceFlag (pokud je volána z obsluhy události v aplikaci VisibilityChange, přenášený argument bude objekt synteticeventu).

Pokud je to Boolean, zkontrolujte, zda je to pravda nebo nepravdivá. Když je hodnota pravdivá, zavolejte metodu SetVisibility s TRUE nebo volejte falešnou metodu. Metoda SetVisibility to používá.Metoda setState pro aktualizaci isvisible hodnoty v stavu komponenty.

Pokud není deviceFlag Boolean, zkontrolujte hodnotu skrytého atributu v dokumentu a volejte metodu SetVisibility odpovídajícím způsobem. Dokončí logiku sledování stavu stránky.

devět. Vytvořit více komponenty. Chcete-li to udělat, použijte vzor Render Props. To je namísto vykreslování komponenty z metody render, nazýváme to.Klady.Děti jako funkce s tímto.Stát.isvisible.

10. Nainstalujte aplikaci Reagovat v Dom v souboru indexu.Js. Importovat dva reagovat viditelnost a video komponenty a vytvořte komponentu aplikace připojením. Funkci sdělujeme jako podřízený prvek komponenty viditelnosti, který přenáší a přenáší jej do video komponenty na výstupu. Video URL přenášíme také jako SRC pro video komponentu. To je způsob, jak je Visiblememanager komponenta založena na poskytnutí rekvizit. Na konci používáme metodu reakce.Vykreslení pro vykreslování aplikací na dom-uzlu s identifikátorem "root".