Crear un enlace Reactivo UsePosition () para obtener y rastrear las coordenadas del navegador

Si brevemente

En este artículo, crearemos un usePosition() reactivo usePosition() para rastrear la geolocalización del navegador. Bajo el capó, este gancho utilizará los getCurrentPosition() y watchPosition() del objeto de navegador nativo navigator.geolocation . Publiqué la versión final del gancho en GitHub y NPM .

¿Por qué crear un gancho usePosition() en principio

Una de las ventajas importantes de los ganchos en React es la capacidad de aislar fragmentos de código relacionados lógicamente en un lugar (en el gancho), evitando la necesidad de mezclar fragmentos de código no relacionados lógicamente, por ejemplo, en el método componentDidMount() del componente.

Supongamos que queremos obtener las coordenadas del navegador ( latitude y longitude ) y después de recibir las coordenadas, solicite el pronóstico del tiempo o la temperatura actual en esta región a un servicio externo. El código de estas dos funcionalidades (obtención de coordenadas y solicitud de temperatura) en React a menudo se coloca dentro de un método componentDidMount() . En este caso, el método componentWillUnmount() generalmente se "limpia" por sí solo, llamando al método clearWatch () para dejar de monitorear la ubicación del navegador. Tal enfoque aumenta el tamaño de los métodos, divide secciones de código conectadas lógicamente en partes (suscribiendo y cancelando por separado la supervisión de la ubicación del navegador), y combina partes del código conectadas lógicamente débilmente en un método (obteniendo coordenadas y temperatura). Leer el código es difícil, como lo es la depuración y el soporte.

A continuación, intentaremos transferir la funcionalidad asociada con la obtención de las coordenadas del navegador en un gancho usePosition() separado para evitar las dificultades mencionadas anteriormente.

¿Cómo usaremos el gancho usePosition()

Vayamos "desde el opuesto" y antes de implementar el gancho en sí mismo, planeemos cómo lo usaremos. Esto nos ayudará a determinar la interfaz de enlace (qué aceptará y qué devolver).

El ejemplo más simple de obtener coordenadas y mostrarlas en la pantalla podría verse así:

 import React from 'react'; //    . import { usePosition } from './usePosition'; export const UsePositionDemo = () => { //    ( ) . const { latitude, longitude, error } = usePosition(); //       (   ). return ( <> latitude: {latitude}, longitude: {longitude}, error: {error} </> ); }; 

Solo una línea con el gancho usePosition() y podemos operar con coordenadas de latitude y longitude . Ni siquiera useState() usado explícitamente los ganchos useState() o useEffect() aquí. Una suscripción a las coordenadas de seguimiento, así como la eliminación de un suscriptor, se encapsulan en un usePosition() . Además, la magia de volver a dibujar los componentes de React hará todo por nosotros. Al principio, las coordenadas serán null o undefined . Tan pronto como se reciban las coordenadas, el componente se volverá a dibujar y los veremos en la pantalla.

Implementación de usePosition()

Nuestro gancho usePosition() es una función JavaScript normal que se ve así:

 //  . export const usePosition = () => { //    . } 

Usaremos los ganchos useState () para el almacenamiento interno de coordenadas y useEffect () para suscribir y cancelar la suscripción de coordenadas de seguimiento. Para hacer esto, debemos importarlos.

 import { useState, useEffect } from 'react'; export const usePosition = () => { //     . } 

Crearemos variables de estado en las que almacenaremos coordenadas o un error en la obtención de coordenadas (por ejemplo, si el usuario se niega a compartir su ubicación).

 import { useState, useEffect } from 'react'; export const usePosition = () => { const [position, setPosition] = useState({}); const [error, setError] = useState(null); //  ... } 

También en esta etapa podemos devolver las variables que se esperan del gancho. Hasta ahora, no hay nada útil en estas variables, pero lo arreglaremos pronto.

 import { useState, useEffect } from 'react'; export const usePosition = () => { const [position, setPosition] = useState({}); const [error, setError] = useState(null); // other code goes here... return { ...position, error }; } 

Y ahora el momento clave de implementación es obtener coordenadas.

 import { useState, useEffect } from 'react'; export const usePosition = () => { const [position, setPosition] = useState({}); const [error, setError] = useState(null); //     ,    .. useEffect(() => { const geo = navigator.geolocation; if (!geo) { setError('   '); return; } //     . watcher = geo.watchPosition(onChange, onError); //  ,       //    ,    . return () => geo.clearWatch(watcher); }, []); return {...position, error}; } 

En el useEffect() , primero verificamos si el navegador admite la funcionalidad de detección de coordenadas. Si la funcionalidad no es compatible, salimos del gancho con un error. De lo contrario, nos suscribimos a cambiar la geolocalización del navegador utilizando las onError() onChange onChange() y onError() (agregaremos su código a continuación). Tenga en cuenta que desde el useEffect() , devolvemos una función anónima que se ejecutará si el componente se elimina de la pantalla. En esta función anónima, nos damos de baja de la vigilancia para no obstruir la memoria. Por lo tanto, toda la lógica de suscribirse y darse de baja del seguimiento está en un gancho usePosition() .

Agreguemos las devoluciones de llamada faltantes:

 import { useState, useEffect } from 'react'; export const usePosition = () => { const [position, setPosition] = useState({}); const [error, setError] = useState(null); const onChange = ({latitude, longitude}) => { //        position,   //    ,    . setPosition({latitude, longitude}); }; const onError = (error) => { setError(error.message); }; useEffect(() => { const geo = navigator.geolocation; if (!geo) { setError('   '); return; } //     . watcher = geo.watchPosition(onChange, onError); //  ,       //    ,    . return () => geo.clearWatch(watcher); }, []); return {...position, error}; } 

El gancho usePosition() está listo para usar.

Al final

Puede encontrar una demostración del gancho y su implementación más detallada con la capacidad de establecer parámetros de seguimiento en GitHub .

Espero que este artículo te haya sido útil. Codificación exitosa!