Jak utworzyć prosty element reagujący, który śledzi "Strona Widoczność" Strona "

Podczas tworzenia aplikacji internetowej możesz napotkać sytuacje, gdy trzeba śledzić aktualny stan widoczności. Zdarza się, że musisz odtworzyć lub zawiesić efekt animacji lub wideo, zmniejszyć intensywność lub śledzić zachowanie użytkownika dla analityki. Na pierwszy rzut oka ta funkcja wydaje się dość prosta na sprzedaż, ale tak nie jest. Śledzenie aktywności użytkownika - dość skomplikowany proces.

Istnieje API widoczności strony, która działa świetnie w większości przypadków, ale nie obsługuje wszystkich możliwych niewidzialności karty przeglądarki. Widoczność stron API wysyła widoczność zdarzenia, aby słuchacze wiedzieli, że stan widoczności strony zmienił się. Nie uruchamia wydarzenia w niektórych przypadkach, jeśli okno lub odpowiednia karta przeglądarki jest ukryta poza zasięgiem wzroku. Aby poradzić sobie z niektórymi z tych przypadków, musimy użyć kombinacji zdarzeń ostrości i rozmycia zarówno w dokumencie, jak i oknie.

Z tego artykułu dowiesz się, jak utworzyć prosty składnik reagujący, który utworów stanu widoczności strony.

Kroki

Aby utworzyć aplikację Reaction, Codesandbox zostanie tutaj użyty (można również użyć aplikacji Create-Reaction-APP). Utworzymy małą aplikację, w której wideo Element HTML5 będzie odtwarzany tylko wtedy, gdy karta przeglądarki jest dostępna lub aktywna, w przeciwnym razie zostanie ona zawieszona automatycznie. Wideo Jest używany do ułatwienia testowania funkcji aplikacji.

jeden. Zacznij od tworzenia najprostszej części, czyli wideo komponentu. Będzie to prosty komponent z parametrami aktywnych i ciągów booleanów zawierających adres URL do wideo. Jeśli aktywne rekwizyty są prawdziwe, zostanie odtworzony film. W przeciwnym razie zostanie zatrzymany.

Obraz zatytułowany z DisplayvityutilsJsZsrcDirectory

2. Utwórz prostą klasę reagowania i wideo z adresem URL kodu źródłowego transmitowanego przy użyciu SRC. Oto nowy ref interfejs API do dołączenia linków do wideo Dom-Node wideo. Skonfigurujesz wideo na powtórzenie Avto, zakładając, że gdy uruchomimy aplikację, strona będzie aktywna.

Safari nie odtwarza automatycznie elementów multimedialnych bez interakcji użytkownika. Metoda porównaniaUstawia jest bardzo wygodna podczas przetwarzania efektów, gdy zmienia się właściwość komponentu. Dlatego ta metoda zostanie użyta tutaj do odtwarzania i zawieszenia wideo w oparciu o bieżącą wartość tego.Plusy.Aktywny.

3. Utwórz narzędzie funkcji. Różnice w prefiksach przeglądarki nie zawsze są wygodne w użyciu pewnych API i jednego z nich. Tworzymy prostą funkcję narzędzia, która obsługuje te różnice i zwróci jedno API na podstawie przeglądarki użytkownika. Twórz i wyeksportuj tę funkcję z Pagebriliwitioutils.Js w katalogu src.

W tej funkcji użyjemy instrukcji Jeśli-Else, aby zwrócić interfejs API specyficzny do przeglądarki. Widać, że dodajemy prefiks MS dla programu Internet Explorer i prefiks WebKit dla przeglądarek WebKit. Przechowujemy żądane API w zmiennych ukrytych i wizyjnych i zwróć je z funkcji jako prostego obiektu. Wreszcie eksportujemy funkcję.

cztery. Przejdź do głównego składnika. Obudowujemy wszystkie logikę śledzenia widoczności strony w klasie klasy reagującej za pomocą szablonu renderowania rekwizytów. Utwórz element klasy VisibleManager. Ten komponent obsługuje dodanie i usunąć wszystkie zdarzenia na podstawie słuchaczy Dom.

pięć. Zacznij od importowania wcześniej utworzonych funkcji pomocniczej i zadzwoń, aby uzyskać właściwą API przeglądarki. Następnie utwórz element reagujący i zainicjuj swój stan za pomocą jednego zainstalowanego ISVISVIBE. To pole boolowskie będzie odpowiedzialne za stan widoczności strony.

Obraz zatytułowany His.forcevishibleTrue i this.forcevishiblefalse

6. W komponentdidMount Dodaj słuchacz zdarzeń do dokumentu dla widofonu za pomocą tej metody.KierownicaChange jako Handler. Dodaj również słuchacz zdarzeń do ostrości i rozmycia zdarzeń w dokumencie, a także element okna. Tym razem to instalujemy.Ciężkość i to.Fixisvishiblefalse jako ładowarki na skupić się na imprezy i rozmycie.

7. Następnie utwórz metodę uchwytującej, która bierze argument Forceflag. Argument ForceFlag zostanie wykorzystany do ustalenia, czy metoda jest spowodowana dzięki zdarzeniu wizyjnemu lub ostrości i rozmycie. Dzieje się tak dlatego, że metody Ciągawiała i CorceSisvityFalse nie robią nic z wyjątkiem metody kierowcy kierowniczej z prawdziwą i fałszywą wartością dla Forceflag.

osiem. Wewnątrz metody rastedvismibleChange, najpierw sprawdzić, czy wartość logicznych argumentów Forceflag jest (jeśli jest wywoływany z obsługi zdarzeń VisibleChange, argument przekazany będzie obiektem syntetycznym).

Jeśli jest boolean, sprawdź, to prawda lub fałsz. Gdy wartość jest prawdziwa, wywołaj metodę sezonowy za pomocą True lub zadzwoń do Fałszywy metody. Metoda setvisible używa tego.Metoda SetState do aktualizacji wartości Isvisvible w stanie komponentu.

Jeśli Forceflag nie jest boolowska, sprawdź wartość ukrytego atrybutu w dokumencie i odpowiednio wywołaj metodę setvisvity. Uzupełnia logikę śledzenia statusu strony.

dziewięć. Zrób wiele komponentów. Aby to zrobić, użyj wzoru renderowania rekwizytów. To znaczy, zamiast świadczyć komponent z metody renderowania, nazywamy to.Plusy.Dzieci jako funkcja z tym.Stan.jest widoczny.

10. Zainstaluj aplikację Reaguj w Domu w pliku indeksu.Js. Importuj dwa reaguj VisibleManager i komponenty wideo i utwórz komponent aplikacji, łącząc je. Przekazujemy funkcję jako element dziecka komponentu VisibleManager, który przejmuje isvisvible i przesyła go do komponentu wideo na wyjściu. Przesyłamy również adres URL wideo jako SRC dla komponentu wideo. W ten sposób składnik Visiblemager oparty jest na renderach. Na koniec korzystamy z metody reakcji.Renderuj dla renderowania aplikacji na Węzie DOM z identyfikatorem "root".