Korisni savjeti

Pratite vidljivost stranice u React pomoću Rendere rekvizita

Pin
Send
Share
Send
Send


Prilikom izrade web aplikacije možete naići na situacije u kojima morate pratiti trenutno stanje vidljivosti. Događa se da morate reproducirati ili pauzirati učinak animacije ili videa, smanjiti intenzitet ili pratiti ponašanje korisnika radi analitike. Na prvi se pogled ova funkcija čini prilično jednostavnom za implementaciju, ali nije baš tako. Praćenje aktivnosti korisnika prilično je kompliciran proces.

Postoji API za vidljivost stranice koji u većini slučajeva funkcionira dobro, ali ne upravlja svim mogućim slučajevima neaktivnosti kartice preglednika. API za vidljivost stranice otprema događaj izmjene vidljivosti kako bi slušaoce obavijestio da se stanje vidljivosti stranice promijenilo. Ne pokreće događaj u nekim slučajevima ako je prozor preglednika ili odgovarajuća kartica skrivena od pogleda. Da bismo riješili neke od tih slučajeva, trebamo koristiti kombinaciju događaja usredotočenja i zamagljivanja u dokumentu i prozoru.

Dakle, iz ovog članka ćete naučiti kako stvoriti jednostavnu React komponentu koja prati stanje vidljivosti stranice.

Codesandbox će se ovdje koristiti za izradu aplikacije React (možete koristiti i create-react-app). Napravit ćemo malu aplikaciju u kojoj će se reproducirati HTML5 video element samo ako je kartica preglednika u fokusu ili aktivna, inače će se automatski pauzirati. Video se koristi za olakšavanje testiranja značajki aplikacije.

visibilityjs - omot za API vidljivosti stranice

Visibility.js je omot za API vidljivosti stranice. Sakriva prodajne prefikse i dodaje funkcije na visokoj razini. API za vidljivost stranice omogućava vam da odredite je li vaša web stranica vidljiva korisniku ili je skrivena na kartici u pozadini ili je predbilježba. Omogućuje vam korištenje stanja vidljivosti stranice u JavaScript logici i poboljšavanje performansi preglednika onemogućavanjem nepotrebnih tajmera i AJAX zahtjeva ili poboljšanjem korisničkog sučelja (na primjer zaustavljanjem reprodukcije videozapisa ili prezentacije kad korisnik prebaci na drugu karticu preglednika).

Prekrivač i lagan način provjere gleda li korisnik stranicu ili komunicira s njom. (omot oko HTML5 vidljivosti api)

Početak

Codesandbox ćemo koristiti za dizanje naše React aplikacije (možete je koristiti Stvaranje-reagiraju-aplikaciju kao i). Izradit ćemo malu aplikaciju koja će imati HTML5 video element koji će se reproducirati samo ako je kartica preglednika u fokusu ili aktivna, inače će se automatski pauzirati. Koristimo videozapis jer će to olakšati testiranje funkcionalnosti naše aplikacije.

Započnimo stvaranjem najjednostavnijeg djela, tj. video komponenta. To će biti jednostavna komponenta koja će dobiti boole rekvizite pod nazivom active i gudački rekvizit src koji će sadržavati URL videozapisa. Ako je aktivni rekvizit istinit, reproducirat ćemo video, u suprotnom ćemo ga zaustaviti.

Napravit ćemo jednostavnu komponentu klase React. Napravit ćemo jednostavan video element s njegovim izvorima postavljenim na URL proslijeđen pomoću src rekvizita i pomoću React-ovog novog ref API-ja za prilog ref na čvoru DOM video. Video ćemo postaviti na automatsko igranje pod pretpostavkom da kada pokrenemo aplikaciju stranica će biti aktivna. Ovdje treba napomenuti da Safari sada ne dopušta automatsko reproduciranje medijskih elemenata bez interakcije korisnika. Metoda životnog ciklusa komponentaDidUpdate vrlo je zgodna u rukovanju nuspojavama kada se rekviziti komponente promijene. Stoga ćemo ovdje koristiti ovu metodu životnog ciklusa za reprodukciju i pauziranje videozapisa na temelju trenutne vrijednosti this.props.active.

Razlike prefiksa dobavljača preglednika vrlo su neugodne za rješavanje prilikom korištenja određenih API-ja, a API vidljivosti stranice zasigurno je jedan od njih. Stoga ćemo stvoriti jednostavnu uslužnu funkciju koja će riješiti te razlike i vratiti nam kompatibilni API temeljen na korisnikovu pregledniku na jednoličan način. Mi ćemo stvoriti i izvoziti ovu malu funkciju iz pageVisibilityUtils.js ispod src katalog.

U ovoj ćemo funkciji vratiti jednostavni kontrolni tijek utemeljen na izjavama ako vraćamo API specifičan za preglednik. Možete vidjeti da smo u prilogu ms prefiks za Internet Explorer i WebKit prefiks za webkit preglednike. Pravi API pohranit ćemo u skrivene i visibilityChange varijable niza i vratiti ih iz funkcije u obliku jednostavnog objekta. Napokon, izvozit ćemo funkciju.

Zatim prelazimo na našu glavnu komponentu. Inkapsulirat ćemo svu našu logiku praćenja vidljivosti u komponenti klase React za višekratnu uporabu pomoću utjecaja uzorka Render Props. Napravit ćemo komponentu klase koja se zove VisibilityManager. Ova komponenta rukovat će se dodavanjem i uklanjanjem svih slušatelja događaja temeljenih na DOM-u.

Započet ćemo uvozom uslužne funkcije koju smo stvorili ranije i pozivanjem na nju kako bi dobili ispravne API-je specifične za preglednik. Tada ćemo stvoriti komponentu React i inicijalizirati njeno stanje s jednim poljem isVisible postavljenim na true. Ovo polje logičnog stanja odgovorno je za odražavanje stanja vidljivosti naše stranice. U komponenti životnog ciklusa komponenteDidMount pričvrstit ćemo slušatelja događaja na dokument za događaj izmjene vidljivosti s metodom this.handleVisibilityChange kao njegovim upravljačem. Također ćemo priložiti slušatelje događaja za fokus i zamagljivanje događaja na dokumentu, kao i element prozora. Ovoga puta postavit ćemo this.forceVisibilityTrue i this.forceVisibilityFalse kao upravljače za fokus i događaje zamagljivanja.

Sada ćemo kreirati metodu handleVisibilityChange koja će prihvatiti jedan argument FORFAG. Ovaj argument ForceFlag koristit će se za određivanje da li se metoda poziva zbog događaja vischangechange ili usredotočenosti ili zamućenja. To je zbog toga što metode forceVisibilityTrue i forceVisibilityFalse ne rade ništa drugo nego pozivaju metodu handleVisibilityChange s istinskom i lažnom vrijednošću argumenta prisilnog zastave. Unutar metode handleVisibilityChange prvo provjeravamo je li vrijednost argumenta forceFlag booleova (to je zato što će se, ako je pozvana od obradnika događaja visibilitychange, tada će argument predati biti SyntheticEvent objekt). Ako je buolov, tada provjeravamo je li istinit ili lažan. Kad je istina, metodu setVisibility nazvali smo true, a u suprotnom nazivamo metodu false kao argumentom. Metoda setVisibility koristi this.setState metodu za ažuriranje vrijednostiVisible field u stanju komponente. Ali, ako FORFFLAG nije Boolean, tada provjeravamo vrijednost skrivenog atributa u dokumentu i pozivamo metodu setVisibility u skladu s tim. Time se zaključuje naša logika praćenja stanja vidljivosti stranice.

Da bismo komponentu učinili višekratnom uporabom u prirodi koristimo obrazac Render Props tj. umjesto da generiramo komponentu iz metode rendera, pozivamo this.props.children kao funkciju s this.state.isVisible.

Napokon, instaliramo našu aplikaciju React na DOM u našoj index.js podnijeti. Uvozimo naše dvije komponente React VisibilityManager i Video i stvaramo malu funkcionalnu aplikaciju React komponente sastavljajući ih. Funkciju prenosimo kao djeca komponente VisibilityManager koja prihvaća Visible kao argument i prosljeđuje ga Video komponenti u svojoj izjavi za povratak. URL video zapisa prosljeđujemo i kao src rekvizite komponenti Video. Ovako konzumiramo komponentu VisiblityManager zasnovanu na Render Propsu. Konačno, koristimo ReactDOM.render metodu za prikazivanje naše React aplikacije na DOM čvoru s idom "root".

zaključak

Moderni API-ji preglednika postaju stvarno moćan i mogu se koristiti za nevjerojatne stvari. Većina ovih API-ja je po svojoj naravi imperativ i s njima se može teško zaključiti ponekad s React-ovom deklarativnom paradigmom. Korištenje moćnih obrazaca poput Render Propsa za umetanje ovih API-ja u vlastite komponente React za višekratnu upotrebu može biti vrlo korisno.

JavaScript Developer i ljubitelj cyber sigurnosti.

Objavljeno 24. kolovoza

Pogledajte video: Subaru u ekstremnim zimskim uvjetima (Rujan 2020).

Pin
Send
Share
Send
Send