Nuttige wenke

Volg bladsy sigbaarheid in reaksie met behulp van render-rekwisiete

Pin
Send
Share
Send
Send


Wanneer u 'n webtoepassing skep, kan u situasies ervaar waar u die huidige sigbaarheidstoestand moet opspoor. Dit gebeur dat u die effek van 'n animasie of video moet afspeel of onderbreek, die intensiteit moet verminder of gebruikersgedrag vir analise moet opspoor. Met die eerste oogopslag lyk hierdie funksie redelik eenvoudig om te implementeer, maar dit is nie so nie. Die opsporing van gebruikersaktiwiteit is 'n taamlik ingewikkelde proses.

Daar is 'n API-bladsy vir sigbaarheid wat in die meeste gevalle goed werk, maar nie alle moontlike gevalle van blaaibaaraktiwiteit hanteer nie. Die Page Visibility API stuur 'n sigbaarheidsgeleentheid uit om luisteraars te laat weet dat die sigbaarheidstoestand van die bladsy verander het. In sommige gevalle word dit nie 'n gebeurtenis geaktiveer as die blaaiervenster of die ooreenstemmende oortjie vir die oog versteek is nie. Om sommige van hierdie gevalle te hanteer, moet ons 'n kombinasie van fokus- en vervaging-gebeure in beide dokumente en vensters gebruik.

Dus, uit hierdie artikel leer jy hoe om 'n eenvoudige React-komponent te skep wat die bladsy-sigbaarheidstoestand volg.

Codesandbox sal hier gebruik word om die React-toepassing te skep (u kan ook create-react-app gebruik). Ons sal 'n klein toepassing skep waarin die HTML5-video-element slegs gespeel sal word as die blaaieroortjie in fokus of aktief is, anders word dit outomaties onderbreek. Video word gebruik om die toetsing van toepassingsfunksies te vergemaklik.

visibilityjs - Wrapper vir die API vir bladsyvisibiliteit

Visibility.js is 'n omhulsel vir die Page Visibility API. Dit verberg verkoopsvoorvoegsels en voeg funksies op hoë vlak by. Met 'n bladsyvisibiliteits-API kan u bepaal of u webblad sigbaar is vir 'n gebruiker of in die agtergrondoortjie versteek of vooruitgegee word. Dit stel u in staat om die bladsy-sigbaarheidstatus in JavaScript-logika te gebruik en die blaaierprestasie te verbeter deur onnodige tydopnemers en AJAX-versoeke te deaktiveer, of die gebruikerskoppelvlak-ervaring te verbeter (byvoorbeeld deur die afspeel van die video of die skyfievertoning te stop as die gebruiker na 'n ander blaaieroort oorgaan).

Crossbrowser en liggewig manier om te kyk of die gebruiker na die bladsy kyk of daarmee in wisselwerking is. (wikkel rondom die sigbaarheid van HTML5 api)

Aan die gang

Ons sal Codesandbox gebruik om ons React-toepassing te herlaai (u kan dit gebruik Skep reageer-app ook). Ons sal 'n klein app skep met 'n HTML5 Video-element wat slegs gespeel kan word as die blaaieroortjie in fokus is of aktief is, anders word dit outomaties laat wag. Ons gebruik 'n video omdat dit die toets van ons app se funksies maklik sal maak.

Kom ons begin deur die eenvoudigste stuk te skep, d.w.s. die videokomponent. Dit is 'n eenvoudige komponent wat 'n Boole-rekwisiete met die naam aktief sal ontvang en 'n string rekwisiete met die naam src wat die URL vir die video sal bevat. As die aktiewe rekwisiete waar is, speel ons die video, anders hou ons dit op.

Ons sal 'n eenvoudige React-klaskomponent skep. Ons sal 'n eenvoudige video-element met die bronteks op die URL wat deur die src-rekwisiete geslaag is, weergee en React se nuwe ref API gebruik om 'n verwysing op die video-DOM-knoop te heg. Ons stel die video op outospeel, as ons aanvaar dat die bladsy aktief sal wees wanneer ons die program begin. Een ding om op te let hier is dat Safari nou nie toelaat om media-elemente outomaties te speel sonder gebruikersinteraksie nie. Die componentDidUpdate-lewensiklusmetode is baie handig om newe-effekte te hanteer as die rekwisiete van 'n komponent verander. Daarom gebruik ons ​​hierdie lewensiklusmetode om die video te speel en te laat wag op grond van die huidige waarde van this.props.active.

Die voorkeurverskille van die blaaierverskaffer is baie irriterend om sekere API's te gebruik, en die API van Page Visibility is beslis een daarvan. Daarom sal ons 'n eenvoudige nutsfunksie skep wat hierdie verskille sal hanteer en die versoenbare API aan ons kan gee, gebaseer op die gebruiker se blaaier op 'n eenvormige manier. Ons sal hierdie klein funksie skep en uitvoer vanaf pageVisibilityUtils.js onder die src gids.

In hierdie funksie gebruik ons ​​eenvoudige, andersins gebaseerde beheervloei, om die blaaier-spesifieke API terug te gee. U kan sien dat ons die Me voorvoegsel vir internet Explorer en WebKit voorvoegsel vir webblaai-blaaiers. Ons sal die korrekte API in verborge en sigbaarheidsveranderlike veranderings stoor en dit van die funksie in die vorm van 'n eenvoudige voorwerp terugstuur. Laastens sal ons die funksie uitvoer.

Vervolgens gaan ons na ons hoofkomponent. Ons sal al ons bladsy-signavolglogika in 'n herbruikbare React-klaskomponent omsluit deur die Render Props-patroon te benut. Ons sal 'n klaskomponent genaamd VisibilityManager skep. Hierdie komponent sal die toevoeging en verwydering van al die DOM-gebaseerde gebeurtenisluisteraars hanteer.

Ons sal begin met die invoer van die nutsfunksie wat ons vroeër geskep het en dit oproep om die regte blaaier-spesifieke API's te kry. Dan sal ons die React-komponent skep en die toestand daarvan inisialiseer met 'n enkele veld is sigbaar gestel as waar. Hierdie veld van die Boole is verantwoordelik vir die weerspieëling van ons bladsy-sigbaarheidstoestand. In die componentDidMount-lewensiklusmetode van die komponent sal ons 'n gebeurtenisluisteraar op die dokument heg vir die sigbaarheidsuitruiling met hierdie.handleVisibilityChange-metode as die hanteerder. Ons sal ook gebeurtenisluisteraars heg vir die fokus en die vervaging van gebeure op die dokument sowel as die vensterelement. Hierdie keer stel ons hierdie.forceVisibilityTrue en this.forceVisibilityFalse as die hanteerders vir onderskeidelik die fokus- en vervaging-gebeure.

Nou sal ons dan die handleVisibilityChange-metode skep wat 'n enkele argument wat gedwing word, sal aanvaar. Hierdie forceFlag-argument sal gebruik word om te bepaal of die metode genoem word as gevolg van die sigbaarheidsveranderingsgebeurtenis of die fokus- of vervaaggebeurtenisse. Dit is so omdat die forceVisibilityTrue en forceVisibilityFalse-metodes niks anders doen as om die handleVisibilityChange-metode te noem met 'n waar en vals waarde vir die forcedFlag-argument nie. Binne die handleVisibilityChange-metode, kyk ons ​​eers of die forseerde argumentwaarde 'n Boole is (dit is omdat dit uit die sigbaarheidsveranderingsgebeurtenis genoem word, dan is die argument wat oorgedra word 'n SyntheticEvent-objek). As dit 'n Boole is, kyk ons ​​of dit waar of onwaar is. As dit waar is, het ons die setVisibility-metode met waar genoem, anders noem ons die metode met vals as 'n argument. Die setVisibility-metode maak gebruik van hierdie.setState-metode om die waarde van dieVisibele veld in die toestand van die komponent op te dateer. Maar as die ForceFlag nie 'n Boole is nie, kyk ons ​​die verborge attribuutwaarde op die dokument en noem die setVisibility-metode dienooreenkomstig. Dit sluit ons opspoorlogika van Page Page Sigbaarheid State in.

Om die komponent herbruikbaar van aard te maak, gebruik ons ​​die Render Props-patroon, d.w.s. in plaas daarvan om 'n komponent van die rendermetode te maak, roep ons hierdie.props.kinders as 'n funksie met this.state.isVisible aan.

Laastens monteer ons ons React-app op die DOM in ons index.js in te dien. Ons voer ons twee React-komponente VisibilityManager en Video in en skep 'n klein funksionele React-komponent-app deur hulle te komponeer. Ons slaag 'n funksie as die kinders van die VisibilityManager-komponent wat aanvaar, is sigbaar as 'n argument en gee dit in die terugstelling aan die Video-komponent. Ons stuur ook 'n video-URL soos src-rekwisiete aan die video-komponent. Dit is hoe ons die Render Props-gebaseerde VisiblityManager-komponent verbruik. Laastens gebruik ons ​​die ReactDOM.render-metode om ons React-app op die DOM-knoop met die ID "root" weer te gee.

gevolgtrekking

Moderne blaaier-API's raak baie kragtig en kan gebruik word om ongelooflike dinge te doen. Die meeste van hierdie API's is uiters noodsaaklik en kan soms moeilik wees om mee te werk in React se verklarende paradigma. Die gebruik van kragtige patrone soos Render Props om hierdie API's in hul eie herbruikbare React-komponente te verpak, kan baie nuttig wees.

JavaScript-ontwikkelaar en kuberveiligheidsentoesias.

Gepubliseer op 24 Aug

Kyk na die video: SCP-093 Red Sea Object. object class euclid. portal extradimensional artifact stone scp (Augustus 2021).

Pin
Send
Share
Send
Send