Een eenvoudige reageercomponent maken die "pagina-zichtbaarheidstatus" traceert

Bij het maken van een webapplicatie kunt u situaties tegenkomen wanneer u de huidige stand van zichtbaarheid moet volgen. Het gebeurt dat u het effect van animatie of video moet reproduceren of opschorten, de intensiteit verlagen of het gedrag van de gebruiker voor analytics kunt volgen. Op het eerste gezicht lijkt deze functie vrij eenvoudig te koop, maar het is niet helemaal zo. Gebruikersactiviteit volgen - een nogal gecompliceerd proces.

Er is een Page Visibility API, die in de meeste gevallen geweldig werkt, maar verwerkt niet alle mogelijke onzichtbaarheid van het browserab. Pagina Zichtbaarheid API stuurt een gebeurtenis zichtbaarheid, zodat luisteraars weten dat de stand van de pagina zichtbaarheid is gewijzigd. Het start in sommige gevallen geen gebeurtenis als het venster of het bijbehorende tabblad van de browser uit het zicht is verborgen. Om enkele van deze gevallen aan te pakken, moeten we een combinatie van focus- en blurevenementen in zowel het document als het venster gebruiken.

Dus uit dit artikel leert u hoe u een eenvoudige reactcomponent kunt maken, welke paginazinnenstatus traceert.

Stappen

Als u een reageertoepassing wilt maken, wordt CodeSandBox hier gebruikt (u kunt ook de app Create-React-App gebruiken). We zullen een kleine toepassing maken waarin de HTML5-elementvideo alleen wordt afgespeeld als het tabblad Browser in focus of actief is, anders wordt deze automatisch opgeschort. Video wordt gebruikt om het testen van de toepassingsfuncties te vergemakkelijken.

Titel afbeelding ComponentVideo
een. Begin met het maken van het eenvoudigste deel, dat wil zeggen, de componentvideo. Het is een eenvoudige component met de Boolean Active en String SRC-parameters met de URL voor video. Als de actieve props waar is, wordt video gespeeld. Anders wordt het gestopt.
  • Titel afbeelding van DisplayvisionNutilsjswsRCDirectory
    2. Maak een eenvoudige reageerklasse en elementvideo met zijn broncode hosting-URL verzonden met SRC. Hier is een nieuwe REF-API om links naar Dom-Knooppuntvideo te bevestigen. U configureert video op SAVTO REPLAY, ervan uitgaande dat wanneer we de toepassing starten, de pagina actief is.
  • Safari speelt niet automatisch multimedia-elementen zonder gebruikersinteractie. De methode vergelijken van vergelijking is erg handig bij het verwerken van effecten wanneer de eigenschap van het component onroerend goed verandert. Daarom wordt deze methode hier gebruikt voor het afspelen en opschorten van video op basis van de huidige waarde hiervan.Pro`s.Actief.
  • 3. Maak een functiehulpprogramma. Verschillen in browservoorvoegsels zijn niet altijd handig om bepaalde API`s te gebruiken, en een van hen. We zullen een eenvoudige nutsfunctie maken die deze verschillen aankunnen en een enkele API retourneert op basis van de browser van de gebruiker. Maak en exporteer deze functie van PageBrilTUTIUTILS.JS in Src Directory.
  • In deze functie zullen we de IF-else-instructie gebruiken om de API-interface weer te geven die specifiek is voor de browser. Het is te zien dat we het MS-prefix voor Internet Explorer en het Webkit-voorvoegsel voor Webkit-browsers toevoegen. We slaan de gewenste API op in verborgen en zichtbaarheid variabelen en retourneren ze van een functie als een eenvoudig object. Ten slotte exporteren we de functie.
  • 4. Navigeer naar het hoofdcomponent. We inkapselen alle pagina`s Visibility Tracking Logic in de reactieklasse-klasse met behulp van de Render Props Template. Maak een Component voor visibilieManager Class. Dit onderdeel blijft alle evenementen toevoegen en verwijderen op basis van DOM-luisteraars.
  • vijf. Begin met het importeren van een eerder gemaakte hulpfunctie en bel het om de juiste browser-API`s te krijgen. Maak vervolgens een reactcomponent en initialiseer zijn toestand met één ISVisible In True. Dit Booleaanse veld is verantwoordelijk voor de staat van de zichtbaarheid van de pagina.
  • Titel afbeelding zijn.forcevisunitytrue en deze.VorvisionFalse
    6. In ComponentDIDMount Voeg Event Luisteraar toe om te documenteren voor zichtbaarheidSchange met behulp van deze methode.HandvatbaarheidSchange als handler. Voeg ook evenementlistener toe voor focus- en blur-evenementen in document, evenals het vensterelement. Deze keer installeren we dit.ForcevisionTrouw en dit.ForceMvisionFalse als handlers voor evenementenfocus en wazig.
  • 7. Creëer vervolgens de methode van de stuurhoeveelheid die TOWNFLAG-argument duurt. Het ForceFlag-argument zal worden gebruikt om te bepalen of de methode wordt veroorzaakt door het zichtbaarheidscentrum of focus- en onscherpe evenementen. Dit komt omdat de ForceMeNTilTIltrue en ForcoNTilityFalse-methoden niets doen, behalve de methode van het handvangsthang met een echte en valse waarde voor ForcentFlag.
  • acht. Binnen de methode van het stuurhang, controleer dan eerst of de waarde van het ForceFlag Logical-argument is (als het wordt genoemd van de VisibilityChange Event Handler, is het verzonden argument een synthetischEvent-object).
  • Als het Booleaans is, controleer dan, het is waar of onwaar. Wanneer de waarde waar is, belt u de Setvision-methode met TRUE of bel de valse methode. Setvision-methode gebruikt dit.SetState-methode voor het bijwerken van de iszichtbare waarde in een componentstatus.
  • Als forceFlag niet Boolean is, controleer dan de waarde van het verborgen kenmerk in het document en bel de Setvision-methode dienovereenkomstig. Het voltooit de logica om de status van de pagina te volgen.
  • Afbeelding met titlethis.state.isvisible
    negen. Maak een meervoudig component. Gebruik hiervoor de render rekwisieten patroon. Dat wil zeggen, in plaats van een component uit de rendermethode te geven, noemen we dit.Pro`s.Kinderen als functie hiermee.Staat.is zichtbaar.
  • 10. Installeer de reageertoepassing in de DOM in het indexbestand.JS. Importeer twee reageer visivanager en videocomponenten en maak een app-component door ze aan te sluiten. We brengen de functie weer als een kindelement van de visibiliteitsonderdeel, dat de ISVisible opneemt en verzendt deze naar de videocomponent bij de uitvoer. We verzenden ook de video-URL als SRC voor de videocomponent. Dit is hoe de VisibleManager-component is gebaseerd op het renderen van rekwisieten. Aan het einde gebruiken we de reactiemethode.Renderen voor toepassing op Dom-Node met "Root" -identificatie.
    • Deel in het sociale netwerk:
    Vergelijkbaar