Handige tips

Volg de paginazichtbaarheid in Reageren met behulp van rekwisieten

Pin
Send
Share
Send
Send


Bij het maken van een webtoepassing kunt u situaties tegenkomen waarin u de huidige zichtbaarheid moet volgen. Het komt voor dat u het effect van een animatie of video moet afspelen of pauzeren, de intensiteit moet verminderen of gebruikersgedrag moet volgen voor analyse. Op het eerste gezicht lijkt deze functie vrij eenvoudig te implementeren, maar dat is niet zo. Het volgen van gebruikersactiviteit is een vrij gecompliceerd proces.

Er is een API voor paginazichtbaarheid die in de meeste gevallen prima werkt, maar niet alle mogelijke gevallen van inactiviteit van het browsertabblad verwerkt. De API voor paginazichtbaarheid verzendt een gebeurtenis voor het veranderen van zichtbaarheid om luisteraars te laten weten dat de zichtbaarheidsstatus van de pagina is gewijzigd. In sommige gevallen wordt er geen gebeurtenis geactiveerd als het browservenster of het bijbehorende tabblad niet zichtbaar is. Om sommige van deze gevallen te behandelen, moeten we een combinatie van focus- en vervaginggebeurtenissen in zowel document als venster gebruiken.

In dit artikel leert u dus hoe u een eenvoudige React-component maakt die de paginazichtbaarheid bijhoudt.

Codesandbox wordt hier gebruikt om de React-applicatie te maken (u kunt ook create-react-app gebruiken). We zullen een kleine applicatie maken waarin het HTML5-video-element alleen wordt afgespeeld als het browsertabblad in focus of actief is, anders wordt het automatisch gepauzeerd. Video wordt gebruikt om het testen van toepassingsfuncties te vergemakkelijken.

visiblejs - Wrapper voor de API voor paginazichtbaarheid

Visibility.js is een wrapper voor de Page Visibility API. Het verbergt leveranciersvoorvoegsels en voegt functies op hoog niveau toe. Met Paginizichtbaarheid-API kunt u bepalen of uw webpagina zichtbaar is voor een gebruiker of verborgen is op het achtergrondtabblad of vooraf. Hiermee kunt u de status van de paginazichtbaarheid in JavaScript-logica gebruiken en de browserprestaties verbeteren door onnodige timers en AJAX-aanvragen uit te schakelen of de gebruikersinterface te verbeteren (bijvoorbeeld door het afspelen van video of diavoorstelling te stoppen wanneer de gebruiker overschakelt naar een ander browsertabblad).

Crossbrowser en lichtgewicht manier om te controleren of de gebruiker naar de pagina kijkt of er interactie mee heeft. (wikkel rond HTML5 zichtbaarheid-API)

Aan de slag

We zullen Codesandbox gebruiken om onze React-applicatie op te starten (u kunt gebruiken create-reactie-app ook). We zullen een kleine app maken met een HTML5 Video-element dat alleen wordt afgespeeld wanneer het browsertabblad is scherpgesteld of actief, anders wordt het automatisch gepauzeerd. We gebruiken een video omdat het testen van de functionaliteit van onze app eenvoudig wordt.

Laten we beginnen met het maken van het eenvoudigste stuk, d.w.z. het videocomponent. Het zal een eenvoudige component zijn die een Booleaanse rekwisieten met de naam active en een String props met de naam src ontvangt die de URL voor de video bevatten. Als de actieve rekwisieten waar zijn, spelen we de video anders pauzeren we deze.

We zullen een eenvoudige React-klassecomponent maken. We zullen een eenvoudig video-element maken waarvan de bron is ingesteld op de URL die is doorgegeven met behulp van de src-props en de nieuwe ref API van React gebruiken om een ​​ref aan het video-DOM-knooppunt toe te voegen. We stellen de video in op automatisch afspelen, ervan uitgaande dat wanneer we de app starten, de pagina actief is. Een ding om op te merken is dat Safari nu geen automatisch afspelen van media-elementen toestaat zonder gebruikersinteractie. De levenscyclusmethode componentDidUpdate is erg handig bij het omgaan met bijwerkingen wanneer de rekwisieten van een component veranderen. Daarom zullen we hier deze levenscyclusmethode gebruiken om de video af te spelen en te pauzeren op basis van de huidige waarde van this.props.active.

Voorvoegsels van browservoorvoerders zijn erg vervelend om mee om te gaan bij het gebruik van bepaalde API's en de API voor paginazichtbaarheid is daar zeker een van. Daarom zullen we een eenvoudige hulpprogramma-functie creëren die deze verschillen aanpakt en ons de compatibele API op basis van de browser van de gebruiker op een uniforme manier retourneren. We zullen deze kleine functie maken en exporteren van pageVisibilityUtils.js onder de src directory.

In deze functie gebruiken we een eenvoudige, als-anders op instructies gebaseerde besturingsstroom om de browserspecifieke API te retourneren. Je kunt zien dat we de ms voorvoegsel voor internet explorer en webkit voorvoegsel voor webkit-browsers. We slaan de juiste API op in verborgen en visibleChange tekenreeksvariabelen en retourneren ze vanuit de functie in de vorm van een eenvoudig object. Ten slotte zullen we de functie exporteren.

Vervolgens gaan we verder met onze hoofdcomponent. We zullen al onze logica voor het bijhouden van de paginazichtbaarheid inkapselen in een herbruikbare component van de React-klasse door gebruik te maken van het Render Props-patroon. We zullen een klassecomponent maken genaamd VisibilityManager. Deze component zorgt voor het toevoegen en verwijderen van alle op DOM gebaseerde gebeurtenislisteners.

We zullen beginnen met het importeren van de eerder gecreëerde hulpprogramma-functie en het aanroepen om de juiste browserspecifieke API's te krijgen. Vervolgens maken we de React-component en initialiseren we de status ervan met een enkel veld is zichtbaar ingesteld op true. Dit Booleaanse statusveld is verantwoordelijk voor het weergeven van onze paginazichtbaarheidstoestand. In de componentDidMount lifecycle-methode van de component voegen we een gebeurtenislistener aan het document toe voor de gebeurtenis voor het veranderen van zichtbaarheid met de methode this.handleVisibilityChange als handler. We voegen ook gebeurtenisluisteraars toe voor de focus en vervagen gebeurtenissen op het document en het vensterelement. Deze keer zullen we this.forceVisibilityTrue en this.forceVisibilityFalse instellen als handlers voor respectievelijk de focus- en vervaginggebeurtenissen.

Nu zullen we vervolgens de methode handleVisibilityChange maken die een enkel argument gedwongenFlag accepteert. Dit argument forceFlag wordt gebruikt om te bepalen of de methode wordt aangeroepen vanwege de gebeurtenis voor het wijzigen van de zichtbaarheid of de focus- of vervagingsgebeurtenissen. Dit komt omdat de methoden forceVisibilityTrue en forceVisibilityFalse niets anders doen dan de methode handleVisibilityChange aanroepen met de waarde true en false voor het argument gedwongenFlag. Binnen de methode handleVisibilityChange controleren we eerst of de waarde van het argument gedwongenFlag een Boolean is (dit komt omdat als het wordt aangeroepen vanuit de gebeurtenishandler voor de uitwisselingsgebeurtenis, het doorgegeven argument een SyntheticEvent-object is). Als het een Boolean is, controleren we of het waar of onwaar is. Als het waar is, noemden we de methode setVisibility met true, anders noemen we de methode met false als argument. De methode setVisibility maakt gebruik van deze methode. SetState om de waarde van het veld isVisible bij te werken in de status van de component. Maar als de gedwongen vlag geen Booleaanse waarde is, controleren we de waarde van het verborgen kenmerk in het document en roepen we de methode setVisibility dienovereenkomstig aan. Hiermee is onze trackinglogica voor Page Visibility State afgerond.

Om het component in de natuur herbruikbaar te maken, gebruiken we het Render Props-patroon, d.w.z. in plaats van een component van de rendermethode te renderen, roepen we this.props.children aan als functie met this.state.isVisible.

Ten slotte monteren we onze React-app op de DOM in onze index.js bestand. We importeren onze twee React-componenten VisibilityManager en Video en maken een kleine functionele React-component-app door ze samen te stellen. We geven een functie door als de onderliggende elementen van de component VisibilityManager die accepteert Zichtbaar is als argument en doorgeven aan de component Video in de instructie return. We geven ook een video-URL als src-ondersteuning door aan het videocomponent. Dit is hoe we de op Render Props gebaseerde VisiblityManager-component consumeren. Ten slotte gebruiken we de methode ReactDOM.render om onze React-app weer te geven op het DOM-knooppunt met id "root".

conclusie

Moderne browser-API's worden echt krachtig en kunnen worden gebruikt om geweldige dingen te doen. De meeste van deze API's zijn noodzakelijk en kunnen lastig zijn om mee te werken, soms in React's verklarende paradigma. Het gebruik van krachtige patronen zoals Render Props om deze API's in hun eigen herbruikbare React-componenten te verpakken, kan erg handig zijn.

JavaScript Developer en Cyber ​​Security Enthusiast.

Gepubliceerd 24 aug

Pin
Send
Share
Send
Send