Consigli Utili

Traccia la visibilità della pagina in React utilizzando Render Props

Pin
Send
Share
Send
Send


Durante la creazione di un'applicazione Web, è possibile che si verifichino situazioni in cui è necessario tenere traccia dello stato di visibilità corrente. È necessario riprodurre o mettere in pausa l'effetto di un'animazione o di un video, ridurre l'intensità o tenere traccia del comportamento dell'utente per l'analisi. A prima vista, questa funzione sembra abbastanza semplice da implementare, ma non è così. Il monitoraggio dell'attività dell'utente è un processo piuttosto complicato.

Esiste un'API di visibilità della pagina che funziona bene nella maggior parte dei casi, ma non gestisce tutti i possibili casi di inattività della scheda del browser. L'API di visibilità della pagina invia un evento di cambio visibilità per far sapere agli ascoltatori che lo stato di visibilità della pagina è cambiato. In alcuni casi non attiva un evento se la finestra del browser o la scheda corrispondente sono nascoste alla vista. Per gestire alcuni di questi casi, dobbiamo utilizzare una combinazione di eventi di messa a fuoco e sfocatura sia nel documento che nella finestra.

Quindi, da questo articolo imparerai come creare un semplice componente React che tiene traccia dello stato di visibilità della pagina.

Codesandbox verrà usato qui per creare l'applicazione React (puoi anche usare create -eagire-app). Creeremo una piccola applicazione in cui l'elemento video HTML5 verrà riprodotto solo se la scheda del browser è attiva o attiva, altrimenti verrà automaticamente messa in pausa. Il video viene utilizzato per facilitare il test delle funzionalità dell'applicazione.

visiblejs: wrapper per l'API di visibilità della pagina

Visibility.js è un wrapper per l'API di visibilità della pagina. Nasconde i prefissi del fornitore e aggiunge funzioni di alto livello. L'API di visibilità della pagina ti consente di determinare se la tua pagina web è visibile all'utente o nascosta nella scheda in background o nel prerendering. Consente di utilizzare lo stato di visibilità della pagina nella logica JavaScript e migliorare le prestazioni del browser disabilitando timer non necessari e richieste AJAX, oppure migliorare l'esperienza dell'interfaccia utente (ad esempio, arrestando la riproduzione video o la presentazione quando l'utente passa a un'altra scheda del browser).

Crossbrowser e modalità leggera per verificare se l'utente sta guardando la pagina o interagendo con essa. (wrapper attorno a API di visibilità HTML5)

Per iniziare

Useremo Codesandbox per avviare la nostra applicazione React (che puoi usare Create-reagiscono-app anche). Creeremo una piccola app con un elemento Video HTML5 che verrà riprodotto solo quando la scheda del browser è attiva o attiva, altrimenti verrà automaticamente messa in pausa. Stiamo usando un video perché renderà semplice il test delle funzionalità della nostra app.

Cominciamo creando il pezzo più semplice, ad es. il componente video. Sarà un semplice componente che riceverà un oggetto booleano chiamato active e un oggetto String chiamato src che conterrà l'URL del video. Se gli oggetti di scena attivi sono veri, riproduciamo il video altrimenti lo metteremo in pausa.

Creeremo un semplice componente di classe React. Renderemo un semplice elemento video con la sua sorgente impostata sull'URL passato usando i puntelli src e utilizzeremo la nuova API ref di React per collegare un riferimento al nodo DOM video. Imposteremo il video sulla riproduzione automatica supponendo che quando avvieremo l'app la pagina sarà attiva. Una cosa da notare qui è che Safari ora non consente la riproduzione automatica di elementi multimediali senza l'interazione dell'utente. Il metodo del ciclo di vita componentDidUpdate è molto utile nella gestione degli effetti collaterali quando cambiano gli oggetti di scena di un componente. Pertanto, qui useremo questo metodo del ciclo di vita per riprodurre e mettere in pausa il video in base al valore corrente di this.props.active.

Le differenze nei prefissi dei fornitori di browser sono molto fastidiose da affrontare quando si utilizzano determinate API e l'API di visibilità della pagina è sicuramente una di queste. Pertanto, creeremo una semplice funzione di utilità che gestirà queste differenze e ci restituirà l'API compatibile basata sul browser dell'utente in modo uniforme. Creeremo ed esporteremo questa piccola funzione da pageVisibilityUtils.js sotto il src directory.

In questa funzione, utilizzeremo un semplice flusso di controllo basato su istruzioni if-else per restituire l'API specifica del browser. Puoi vedere che abbiamo allegato il ms prefisso per Internet Explorer e webkit prefisso per i browser webkit. Memorizzeremo l'API corretta in variabili stringa nascoste e visibleChange e le restituiremo dalla funzione sotto forma di un oggetto semplice. Infine, esporteremo la funzione.

Successivamente, passiamo al nostro componente principale. Incapsuleremo tutta la nostra logica di tracciamento della visibilità della pagina in un componente di classe React riutilizzabile sfruttando il modello Puntelli rendering. Creeremo un componente di classe chiamato VisibilityManager. Questo componente gestirà l'aggiunta e la rimozione di tutti i listener di eventi basati su DOM.

Inizieremo importando la funzione di utilità creata in precedenza e invocandola per ottenere le API specifiche del browser corrette. Quindi, creeremo il componente React e inizializzeremo il suo stato con un singolo campo isVisible impostato su true. Questo campo dello stato booleano sarà responsabile per riflettere il nostro stato di visibilità della pagina. Nel metodo del ciclo di vita componentDidMount del componente allegheremo un listener di eventi sul documento per l'evento visiblechange con il metodo this.handleVisibilityChange come gestore. Allegheremo anche listener di eventi per lo stato attivo e gli effetti di sfocatura sul documento e sull'elemento finestra. Questa volta imposteremo this.forceVisibilityTrue e this.forceVisibilityFalse rispettivamente come gestori degli eventi focus e blur.

Ora creeremo quindi il metodo handleVisibilityChange che accetterà un singolo argomento forcedFlag. Questo argomento forceFlag verrà utilizzato per determinare se il metodo viene chiamato a causa dell'evento visiblechange o degli eventi focus o blur. Questo perché i metodi forceVisibilityTrue e forceVisibilityFalse non fanno altro che chiamare il metodo handleVisibilityChange con valore true e false per l'argomento forcedFlag. All'interno del metodo handleVisibilityChange, per prima cosa controlliamo se il valore dell'argomento forcedFlag è un valore booleano (ciò è dovuto al fatto che se viene chiamato dal gestore dell'evento visiblechange che l'argomento trasmesso sarà un oggetto SyntheticEvent). Se è un booleano, controlliamo se è vero o falso. Quando è vero abbiamo chiamato il metodo setVisibility con vero, altrimenti chiamiamo il metodo con falso come argomento. Il metodo setVisibility sfrutta il metodo this.setState per aggiornare il valore del campo isVisible nello stato del componente. Ma, se forcedFlag non è un valore booleano, controlliamo il valore dell'attributo nascosto sul documento e chiamiamo il metodo setVisibility di conseguenza. Ciò racchiude la nostra logica di tracciamento dello stato di visibilità della pagina.

Per rendere il componente riutilizzabile in natura, utilizziamo il modello Render Props, ad es. invece di eseguire il rendering di un componente dal metodo render, invochiamo this.props.children come funzione con this.state.isVisible.

Infine, montiamo la nostra app React sul DOM nel nostro index.js file. Importiamo i nostri due componenti React VisibilityManager e Video e creiamo una piccola App funzionale Componente React componendoli. Passiamo una funzione poiché i figli del componente VisibilityManager che accetta è Visible come argomento e la passano al componente Video nella sua dichiarazione di ritorno. Passiamo anche un URL video come puntelli src al componente Video. Ecco come consumiamo il componente VisiblityManager basato su Render Props. Infine, utilizziamo il metodo ReactDOM.render per eseguire il rendering della nostra app React sul nodo DOM con ID "root".

conclusione

Le moderne API del browser stanno diventando davvero potenti e possono essere utilizzate per fare cose straordinarie. La maggior parte di queste API sono di natura imperativa e possono essere difficili da lavorare a volte nel paradigma dichiarativo di React. Usare modelli potenti come Render Props per avvolgere queste API nei loro componenti React riutilizzabili può essere molto utile.

Sviluppatore JavaScript e appassionato di sicurezza informatica.

Pubblicato il 24 agosto

Pin
Send
Share
Send
Send