Koristni nasveti

Sledenje vidnosti strani v React s pomočjo Render Props

Pin
Send
Share
Send
Send


Pri ustvarjanju spletne aplikacije lahko naletite na situacije, ko morate spremljati trenutno stanje vidnosti. Dogaja se, da morate predvajati ali zaustaviti učinek animacije ali videoposnetka, zmanjšati intenzivnost ali slediti vedenju uporabnikov za analitiko. Ta funkcija se na prvi pogled zdi precej preprosta, vendar ni povsem tako. Sledenje dejavnosti uporabnikov je precej zapleten postopek.

Obstaja API za prepoznavnost strani, ki v večini primerov deluje dobro, vendar ne obravnava vseh možnih primerov neaktivnosti zavihka brskalnika. API za prepoznavnost strani odpre dogodek za spremembo vidnosti, tako da poslušalci obvestijo, da se je stanje vidnosti strani spremenilo. V nekaterih primerih ne sproži dogodka, če je okno brskalnika ali ustrezen zavihek skrit pred pogledom. Za obravnavo nekaterih teh primerov moramo uporabiti kombinacijo fokusiranja in zameglitve dogodkov tako v dokumentu kot v oknu.

Iz tega članka se boste naučili, kako ustvariti preprosto komponento React, ki spremlja stanje vidnosti strani.

Tu bo Codesandbox uporabljen za ustvarjanje aplikacije React (lahko uporabite tudi create-react-app). Ustvarili bomo majhno aplikacijo, v kateri se bo video element HTML5 predvajal le, če je jeziček brskalnika v fokusu ali je aktiven, sicer bo samodejno zaustavljen. Video se uporablja za lažje testiranje funkcij aplikacije.

visibilityjs - Ovijač za API za prepoznavnost strani

Visibility.js je ovojnik za API za prepoznavanje strani. Skriva prodajne predpone in dodaja funkcije na visoki ravni. API za prepoznavnost strani vam omogoča, da določite, ali je vaša spletna stran uporabniku vidna ali skrita v zavihku ozadja ali vnaprejšnjem upodabljanju. Omogoča vam uporabo stanja vidnosti strani v logiki JavaScript in izboljšanje učinkovitosti brskalnika z onemogočanjem nepotrebnih časovnikov in zahtev AJAX ali izboljšanjem uporabniškega vmesnika (na primer z ustavitvijo predvajanja videoposnetkov ali diaprojekcije, ko uporabnik preklopi na drug zavihek brskalnika).

Navzkrižno brskalnik in lahek način preverjanja, ali uporabnik gleda stran ali sodeluje z njo. (ovitek okoli vidljivosti HTML5 api)

Začetek

Codesandbox bomo uporabili za zagon naše aplikacije React (lahko jo uporabite ustvari-reagiraj-app tudi). Ustvarili bomo majhno aplikacijo, ki bo vsebovala element HTML5 Video, ki se bo predvajal samo, če je jeziček brskalnika v fokusu ali je aktiven, sicer bo samodejno zaustavljen. Videoposnetek uporabljamo, ker bo olajšalo testiranje funkcionalnosti naše aplikacije.

Začnimo z ustvarjanjem najpreprostejšega kosa, tj. video komponento. To bo preprosta komponenta, ki bo prejela logični rekvizit z imenom active in strunski rekvizit z imenom src, ki bo vseboval URL za video. Če je aktivni rekvizit resničen, bomo predvajali video, sicer ga bomo zaustavili.

Ustvarili bomo preprosto komponento razreda React. Omogočili bomo preprost video element z njegovim izvorom, ki je bil nastavljen na URL, ki ga posredujete s pomočjo src rekvizitov, z Reactovim novim API-jem ref. Video bomo nastavili tako, da bo samodejno predvajal, ob predpostavki, da bo stran zagnana. Pri tem je treba opozoriti, da Safari zdaj ne dovoljuje samodejnega predvajanja medijskih elementov brez interakcije uporabnika. Metoda življenjskega cikla komponentaDidUpdate je zelo priročna pri ravnanju s stranskimi učinki, ko se rekviziti komponente spremenijo. Zato bomo tukaj uporabili to metodo življenjskega cikla za predvajanje in zaustavitev videoposnetka na podlagi trenutne vrednosti this.props.active.

Razlike v predponskih ponudnikih brskalnikov so zelo moteče pri obravnavi nekaterih API-jev in API Visibility Page je zagotovo eden izmed njih. Zato bomo ustvarili preprosto uporabno funkcijo, ki bo odpravila te razlike in nam enotno vrnila združljiv API, ki temelji na uporabnikovem brskalniku. To majhno funkcijo bomo ustvarili in izvažali iz nje pageVisibilityUtils.js pod src imenik.

V tej funkciji bomo uporabili preprost nadzorni tok, ki temelji na stavkih, da vrnemo API, ki je specifičen za brskalnik. Lahko vidite, da smo priložili ms predpono za Internet Explorer in spletna stran predpona za brskalnike webkit. Pravi API bomo shranili v skrite spremenljivke niza in vidibilityChange in jih vrnili iz funkcije v obliki preprostega predmeta. Nazadnje bomo funkcijo izvozili.

Nato preidemo na našo glavno komponento. Vso našo logiko sledenja prepoznavnosti strani bomo vključili v komponento razreda React za večkratno uporabo s pomočjo vzoreca Render Props. Ustvarili bomo komponento razreda, imenovano VisibilityManager. Ta komponenta bo urejala dodajanje in odstranjevanje vseh poslušalcev dogodkov, ki temeljijo na DOM.

Začeli bomo z uvozom pomožne funkcije, ki smo jo ustvarili prej, in priklicali, da dobimo ustrezne API-je za brskalnik. Nato bomo ustvarili komponento React in inicializirali njeno stanje z enim poljem isVisible nastavljeno na true. To polje Boolove države bo odgovorno za izražanje stanja vidnosti naše strani. V načinu življenjskega cikla komponenta komponentaDidMount bomo na dokument pritrdili poslušalca dogodkov za dogodek vidnosti, pri čemer je metoda this.handleVisibilityChange kot njegov upravljavec. Na dokument bomo priložili tudi poslušalce dogodkov za fokus in zameglitev dogodkov ter element okna. Tokrat bomo postavili this.forceVisibilityTrue in this.forceVisibilityFalse kot vodnike za fokus in zameglitev dogodkov.

Zdaj bomo ustvarili metodo handleVisibilityChange, ki bo sprejela en argument FORFLAG. Ta argument forceFlag bo uporabljen za določitev, ali se metoda prikliče zaradi dogodka spremembe vidnosti ali dogodkov osredotočenosti ali zamegljenosti. To je tako, ker metodi forceVisibilityTrue in forceVisibilityFalse ne pomenita ničesar, ampak pokličeta metodo handleVisibilityChange z resnično in napačno vrednostjo za argument prisiljene zastave. Znotraj metode handleVisibilityChange najprej preverimo, ali je vrednost argumenta forceFlag boolean (to je zato, ker če bo poklicana iz obdelovalca dogodkov visibilitychange, potem bo argument, ki ga posredujemo, predmet SyntheticEvent). Če je logična, potem preverimo, ali je resnična ali napačna. Ko je res, smo metodo setVisibility poklicali z true, sicer metodo imenujemo false kot argument. Metoda setVisibility uporablja to metodo.setState, da posodobi vrednost isVisible polja v stanju komponente. Če pa prisiljena zastava ni logična, preverimo vrednost skritega atributa in ustrezno pokličemo metodo setVisibility. To zajema našo logiko sledenja stanja prepoznavnosti strani.

Za izboljšanje uporabe komponente v naravi uporabljamo vzorec Render Props, tj. namesto da upodabljamo komponento iz metode upodabljanja, prikličemo this.props.children kot funkcijo s tem.state.isVisible.

Nazadnje namestimo našo aplikacijo React na DOM v naši index.js datoteka. Uvažamo naše dve komponenti React VisibilityManager in Video in s sestavljanjem ustvarjamo majhno funkcionalno aplikacijo React. Funkcijo posredujemo kot otroci komponente VisibilityManager, ki sprejema funkcijo Visible kot argument in jo v povratnem stavku prenese v komponento Video. URL videoposnetka posredujemo tudi kot src rekvizit komponenti Video. Tako porabimo komponento VisiblityManager, ki temelji na Render Propsu. Končno uporabimo metodo ReactDOM.render za upodabljanje naše aplikacije React na vozlišču DOM z id "root".

Zaključek

Sodobni brskalniški API-ji postajajo resnično močni in jih je mogoče uporabiti za neverjetne stvari. Večina teh API-jev je po naravi nujna in jih je včasih težko preizkusiti v deklarativni paradigmi Reacta. Uporaba močnih vzorcev, kot je Render Props, za zavijanje teh API-jev v lastne komponente React za večkratno uporabo je lahko zelo koristna.

JavaScript Developer in ljubitelj kibernetske varnosti.

Objavljeno 24. avgusta

Oglejte si video: Digitalije 011: Prijateljsko sledenje s Find Friends in Google Latitude (April 2020).

Pin
Send
Share
Send
Send