Cum se creează o componentă simplă reacțională care urmărește "Starea vizibilității paginilor"

Când creați o aplicație web, puteți întâmpina situații când trebuie să urmăriți starea actuală de vizibilitate. Se întâmplă că trebuie să reproduceți sau să suspendeți efectul de animație sau video, să reduceți intensitatea sau să urmăriți comportamentul utilizatorului pentru analiză. La prima vedere, această caracteristică pare destul de simplă de vânzare, dar nu este așa. Urmărirea activității utilizatorilor - un proces destul de complicat.

Există o vizibilitate a paginii API, care funcționează excelent în majoritatea cazurilor, dar nu se ocupă de toate invizibilitatea posibile a filei browserului. Vizibilitatea paginii API trimite vizibilitatea evenimentului, astfel încât ascultătorii să știe că statul de vizibilitate a paginii sa schimbat. Nu lansează un eveniment în unele cazuri dacă fereastra sau fila corespunzătoare browserului este ascunsă din vedere. Pentru a gestiona unele dintre aceste cazuri, trebuie să folosim o combinație de evenimente Focus și Blur în documente, cât și în fereastră.

Deci, din acest articol veți învăța cum să creați o componentă simplă reacțională, care urmărește starea de vizibilitate a paginii.

Pași

Pentru a crea o aplicație reacțională, codul de cod va fi utilizat aici (puteți utiliza, de asemenea, aplicația Creați-reacția). Vom crea o aplicație mică în care videoclipul elementului HTML5 va fi redat numai dacă fila Browser este focalizată sau activă, altfel va fi suspendată automat. Video este utilizat pentru a facilita testarea funcțiilor de aplicare.

unu. Începeți cu crearea celei mai simple părți, adică videoclipul component. Va fi o componentă simplă cu parametrii SRC Boolean Active și StrC conținând adresa URL pentru video. Dacă vor fi redatele active, va fi redat video. În caz contrar, acesta va fi oprit.

Imagine intitulată de la DisplayVisibilyutilsjwsrcDirectoare

2. Creați un videoclip de clasă simplă și un element cu codul de găzduire a codului sursă transmisă utilizând SRC. Aici este un nou API REF pentru a atașa link-uri la video DOM-NODE. Veți configura videoclipul pe Replay Avto, presupunând că atunci când începem aplicația, pagina va fi activă.

Safari nu redă automat elemente multimedia fără interacțiunea utilizatorului. Metoda comparcudtată este foarte convenabilă atunci când efectele procesării atunci când se schimbă proprietatea componentă. Prin urmare, această metodă va fi utilizată aici pentru redarea și suspendarea video pe baza valorii actuale a acestui lucru.Pro.Activ.

3. Creați un utilitar de funcții. Diferențele în prefixele de browser nu sunt întotdeauna convenabile pentru a utiliza anumite API și unul dintre ele. Vom crea o funcție de utilitate simplă care va gestiona aceste diferențe și va returna un singur API pe baza browserului utilizatorului. Creați și exportați această funcție din paginaBrityUtiletile.JS în directorul SRC.

În această caracteristică, vom folosi declarația dacă altceva pentru a returna interfața API specifică browserului. Se poate observa că adăugăm prefixul MS pentru Internet Explorer și prefixul WebKit pentru browserele WebKit. Vom stoca API-ul dorit în variabile ascunse și vizibilitate și le vom întoarce dintr-o funcție ca un obiect simplu. În cele din urmă, exportăm funcția.

4. Navigați la componenta principală. Încapsulăm logica de urmărire a vizibilității paginilor în clasa de clasă reacțională utilizând șablonul de recuzită Render. Creați o componentă de clasă VisibilitateManager. Această componentă se va gestiona și șterge toate evenimentele bazate pe ascultătorii DOM.

cinci. Începeți prin importul unei funcții auxiliare create anterior și îl sunați pentru a obține API-ul browserului drept. Apoi creați o componentă reacțională și inițializați starea acesteia cu un singur dezactivat instalat într-adevăr. Acest câmp boolean va fi responsabil pentru starea vizibilității paginilor.

Imaginea intitulată a său.ForceVisibilitateaTrue și acest lucru.ForceVisibilitateaFalse

6. În componentaDidmount add ascultătorul evenimentului pentru a documenta pentru vizibilitate care utilizează această metodă.Gândiți-vă în mod obișnuit. Adăugați, de asemenea, ascultător de evenimente pentru evenimente Focus și Blur în document, precum și elementul de fereastră. De data aceasta instalează acest lucru.ForceVisibilitateaTrue și asta.ForceVisibilitateFalse ca stivuitoare pentru evenimente Focus și Blur.

7. Apoi, creați metoda mânerului dedicare care necesită argumentul ForceFlag. Argumentul FORTFLAG va fi utilizat pentru a determina dacă metoda este cauzată de evenimentul vizibilității sau evenimentele de focalizare și blur. Acest lucru se datorează faptului că metodele ForceVisibilitățiiTrue și ForceVisibilitateFalse nu fac nimic, cu excepția metodei GhostVisibilyChange cu o valoare adevărată și falsă pentru ForceFlag.

opt. În interiorul metodei de ghidare a mânerului, verificați mai întâi dacă valoarea argumentului logic ForceFlag este (dacă este numită de la Handler de evenimente VisibiliyCange, argumentul transmis va fi un obiect sinteticevent).

Dacă este boolean, verificați, este adevărat sau fals. Când valoarea este adevărată, apelați metoda de setVisibilitate cu adevărat sau apelați metoda falsă. Metoda de setVisibilitate utilizează acest lucru.Setați metoda de actualizare a valorii isvisibile într-o stare de componente.

Dacă ForceFlag nu este boolean, verificați valoarea atributului ascuns în document și apelați metoda de setVisibilitate în consecință. Completează logica de urmărire a stării paginii.

nouă. Face o componentă multiplă. Pentru a face acest lucru, utilizați modelul de recuzită Render. Adică, în loc să facă o componentă din metoda de redare, numim acest lucru.Pro.Copiii ca o funcție cu asta.Stat.este vizibil.

10. Instalați aplicația reacțională în DOM în fișierul index.Js. Importați două reacționări reactive și componente video și creați o componentă de aplicație prin conectarea acestora. Transmitem funcția ca element copil al componentei VisibilitateManager, care preia vizibilitatea și o transmite la componenta video la ieșire. De asemenea, transmitem adresa URL video ca SRC pentru componenta video. Acesta este modul în care componenta VisibleManager se bazează pe Render Press. În final, folosim metoda Reactdom.Renunțați la aplicarea pe nodul DOM cu identificatorul "rădăcină".