Hilfreiche Ratschläge

Verfolgen Sie die Sichtbarkeit von Seiten in React mithilfe von Render-Requisiten

Pin
Send
Share
Send
Send


Beim Erstellen einer Webanwendung können Situationen auftreten, in denen Sie den aktuellen Status der Sichtbarkeit verfolgen müssen. Es kommt vor, dass Sie den Effekt einer Animation oder eines Videos abspielen oder anhalten, die Intensität verringern oder das Nutzerverhalten für die Analyse verfolgen müssen. Diese Funktion scheint auf den ersten Blick recht einfach zu implementieren, ist es aber nicht. Das Verfolgen der Benutzeraktivität ist ein ziemlich komplizierter Prozess.

Es gibt eine API für die Seitensichtbarkeit, die in den meisten Fällen einwandfrei funktioniert, jedoch nicht alle möglichen Fälle von Inaktivität der Browser-Registerkarten behandelt. Die Seiten-Sichtbarkeits-API löst ein Sichtbarkeitsänderungsereignis aus, um Listener darüber zu informieren, dass sich der Sichtbarkeitsstatus der Seite geändert hat. In einigen Fällen wird kein Ereignis ausgelöst, wenn das Browserfenster oder die entsprechende Registerkarte nicht angezeigt wird. Um einige dieser Fälle zu behandeln, müssen wir eine Kombination aus Fokus- und Weichzeichnungsereignissen sowohl im Dokument als auch im Fenster verwenden.

In diesem Artikel erfahren Sie, wie Sie eine einfache React-Komponente erstellen, die den Status der Seitensichtbarkeit verfolgt.

Codesandbox wird hier verwendet, um die React-Anwendung zu erstellen (Sie können auch die create-react-App verwenden). Wir werden eine kleine Anwendung erstellen, in der das HTML5-Videoelement nur abgespielt wird, wenn die Browserregisterkarte im Fokus oder aktiv ist, andernfalls wird es automatisch angehalten. Video wird verwendet, um das Testen von Anwendungsfunktionen zu erleichtern.

visiblejs - Wrapper für die Page Visibility API

Visibility.js ist ein Wrapper für die Page Visibility API. Es verbirgt Herstellerpräfixe und fügt übergeordnete Funktionen hinzu. Mit der Seitensichtbarkeits-API können Sie bestimmen, ob Ihre Webseite für einen Benutzer sichtbar oder im Hintergrundregister oder beim Vorrendern ausgeblendet ist. Sie können den Status der Seitensichtbarkeit in der JavaScript-Logik verwenden und die Browserleistung verbessern, indem Sie unnötige Zeitgeber und AJAX-Anforderungen deaktivieren oder die Benutzeroberfläche optimieren (z. B. durch Stoppen der Videowiedergabe oder Diashow, wenn der Benutzer zu einer anderen Browserregisterkarte wechselt).

Crossbrowser und einfache Methode, um zu überprüfen, ob der Benutzer die Seite ansieht oder mit ihr interagiert. (Wrapper um HTML5 Visibility API)

Erste Schritte

Wir werden Codesandbox verwenden, um unsere React-Anwendung zu booten (können Sie verwenden) Erstellen-Reagieren-App auch). Wir werden eine kleine App erstellen, die ein HTML5-Videoelement enthält, das nur abgespielt wird, wenn die Browserregisterkarte im Fokus ist oder aktiv ist. Andernfalls wird sie automatisch angehalten. Wir verwenden ein Video, da es das Testen der Funktionalität unserer App vereinfacht.

Beginnen wir mit dem einfachsten Stück, d.h. die Videokomponente. Es wird eine einfache Komponente sein, die eine Boolesche Requisite mit dem Namen active und eine String-Requisite mit dem Namen src erhält, die die URL für das Video enthält. Wenn die aktiven Requisiten wahr sind, werden wir das Video abspielen, andernfalls werden wir es anhalten.

Wir werden eine einfache React-Klassenkomponente erstellen. Wir werden ein einfaches Videoelement rendern, dessen Quelle auf die mit den src-Requisiten übergebene URL festgelegt ist, und die neue ref-API von React verwenden, um eine ref am Video-DOM-Knoten anzuhängen. Wir werden das Video auf Autoplay setzen, vorausgesetzt, wenn wir die App starten, wird die Seite aktiv sein. Hierbei ist zu beachten, dass Safari das automatische Abspielen von Medienelementen ohne Benutzerinteraktion nicht mehr zulässt. Die Lifecycle-Methode componentDidUpdate ist sehr praktisch im Umgang mit Nebenwirkungen, wenn sich die Requisiten einer Komponente ändern. Daher verwenden wir hier diese Lebenszyklusmethode, um das Video basierend auf dem aktuellen Wert von this.props.active abzuspielen und anzuhalten.

Präfixunterschiede zwischen Browsern und Anbietern sind bei der Verwendung bestimmter APIs sehr ärgerlich, und die Page Visibility-API ist sicherlich eine davon. Aus diesem Grund erstellen wir eine einfache Utility-Funktion, die diese Unterschiede berücksichtigt und uns die kompatible API basierend auf dem Browser des Benutzers auf einheitliche Weise zurückgibt. Wir werden diese kleine Funktion von erstellen und exportieren pageVisibilityUtils.js unter der src Verzeichnis.

In dieser Funktion verwenden wir einen einfachen, auf if-else-Anweisungen basierenden Kontrollfluss, um die browserspezifische API zurückzugeben. Wie Sie sehen können, haben wir das beigefügt ms Präfix für Internet Explorer und Webkit Präfix für Webkit-Browser. Wir werden die richtige API in versteckten und visibleChange-Stringvariablen speichern und sie von der Funktion in Form eines einfachen Objekts zurückgeben. Zuletzt exportieren wir die Funktion.

Als nächstes gehen wir zu unserer Hauptkomponente über. Wir werden all unsere Logik zur Nachverfolgung der Seitensichtbarkeit in einer wiederverwendbaren React-Klassenkomponente zusammenfassen, indem wir das Render Props-Muster nutzen. Wir werden eine Klassenkomponente namens VisibilityManager erstellen. Diese Komponente übernimmt das Hinzufügen und Entfernen aller DOM-basierten Ereignis-Listener.

Zunächst importieren wir die zuvor erstellte Dienstprogrammfunktion und rufen sie auf, um die richtigen browserspezifischen APIs abzurufen. Dann erstellen wir die React-Komponente und initialisieren ihren Status mit einem einzigen Feld, das isVisible auf true setzt. Dieses boolesche Statusfeld ist dafür verantwortlich, den Status unserer Seitensichtbarkeit wiederzugeben. In der componentDidMount-Lifecycle-Methode der Komponente fügen wir dem Dokument einen Ereignis-Listener für das visiblechange-Ereignis mit der this.handleVisibilityChange-Methode als Handler hinzu. Wir werden auch Ereignis-Listener für die Fokus- und Weichzeichnungsereignisse im Dokument sowie im Fensterelement anfügen. Dieses Mal legen wir this.forceVisibilityTrue und this.forceVisibilityFalse als Handler für die Fokus- bzw. Weichzeichnungsereignisse fest.

Anschließend erstellen wir die handleVisibilityChange-Methode, die ein einzelnes Argument forcedFlag akzeptiert. Dieses forceFlag-Argument wird verwendet, um zu bestimmen, ob die Methode aufgrund des Sichtbarkeitsänderungsereignisses oder des Fokus- oder Unschärfeereignisses aufgerufen wird. Dies liegt daran, dass die Methoden forceVisibilityTrue und forceVisibilityFalse nur die Methode handleVisibilityChange mit dem Wert true und false für das Argument forcedFlag aufrufen. In der handleVisibilityChange-Methode prüfen wir zunächst, ob das Argument forcedFlag ein Boolescher Wert ist (dies liegt daran, dass das übergebene Argument ein SyntheticEvent-Objekt ist, wenn es vom Visibilitychange-Ereignishandler aufgerufen wird). Wenn es ein Boolescher Wert ist, prüfen wir, ob er wahr oder falsch ist. Wenn es wahr ist, haben wir die Methode setVisibility mit true aufgerufen, andernfalls rufen wir die Methode mit false als Argument auf. Die Methode setVisibility verwendet diese Methode setState, um den Wert des Felds isVisible im Status der Komponente zu aktualisieren. Handelt es sich bei dem forcedFlag jedoch nicht um einen Booleschen Wert, überprüfen wir den Wert des ausgeblendeten Attributs im Dokument und rufen die Methode setVisibility entsprechend auf. Dies schließt unsere Nachverfolgungslogik für den Seitensichtbarkeitsstatus ab.

Um die Komponente in der Natur wiederverwendbar zu machen, verwenden wir das Render Props-Muster, d.h. Anstatt eine Komponente aus der Rendermethode zu rendern, rufen wir this.props.children als Funktion mit this.state.isVisible auf.

Zuletzt mounten wir unsere React App in unserem DOM index.js Datei. Wir importieren unsere beiden React-Komponenten VisibilityManager und Video und erstellen eine kleine funktionale React-Komponenten-App, indem wir sie zusammenstellen. Wir übergeben eine Funktion als untergeordnetes Element der VisibilityManager-Komponente, die "Visible" als Argument akzeptiert, und übergeben sie in ihrer return-Anweisung an die Video-Komponente. Wir übergeben auch eine Video-URL als src-Requisite an die Videokomponente. So verwenden wir die auf Render-Requisiten basierende VisiblityManager-Komponente. Schließlich verwenden wir die ReactDOM.render-Methode, um unsere React-App auf dem DOM-Knoten mit der ID "root" zu rendern.

Fazit

Moderne Browser-APIs werden immer leistungsfähiger und können verwendet werden, um erstaunliche Dinge zu tun. Die meisten dieser APIs sind von Natur aus unerlässlich und können in Reacts deklarativem Paradigma manchmal schwierig zu handhaben sein. Die Verwendung leistungsfähiger Muster wie Render-Requisiten, um diese APIs in ihre eigenen wiederverwendbaren React-Komponenten zu verpacken, kann sehr nützlich sein.

JavaScript-Entwickler und Cyber ​​Security-Enthusiast.

Veröffentlicht am 24. Aug.

Sehen Sie sich das Video an: Virt A Mate Tutorial Part 12 - New UI And Function Update - (Kann 2021).

Pin
Send
Share
Send
Send