Membuat hook UsePosition () reaktif untuk mendapatkan dan melacak koordinat browser

Jika singkat

Pada artikel ini, kami akan membuat usePosition() hook reaktif untuk melacak geolokasi browser. Di bawah kap, kait ini akan menggunakan metode getCurrentPosition() dan watchPosition() dari navigator.geolocation objek browser asli. Saya menerbitkan versi final dari hook pada GitHub dan NPM .

Mengapa membuat hook usePosition() pada prinsipnya

Salah satu keuntungan penting dari kait dalam Bereaksi adalah kemampuan untuk mengisolasi fragmen kode yang terkait secara logis di satu tempat (di hook), sambil menghindari kebutuhan untuk mencampur fragmen kode yang tidak berhubungan secara logis, misalnya, dalam metode componentDidMount() komponen.

Misalkan kita ingin mendapatkan koordinat browser ( latitude dan longitude ) dan setelah menerima koordinat, minta ramalan cuaca atau suhu saat ini di wilayah ini dari layanan pihak ketiga. Kode dari dua fungsi ini (memperoleh koordinat dan suhu permintaan) dalam Bereaksi sering ditempatkan di dalam satu metode componentDidMount() . Dalam hal ini, metode componentWillUnmount() biasanya "dibersihkan" dengan sendirinya, memanggil metode clearWatch () untuk berhenti memantau lokasi browser. Pendekatan semacam itu meningkatkan ukuran metode, membagi bagian-bagian kode yang terhubung secara logis menjadi beberapa bagian (berlangganan dan berhenti berlangganan secara terpisah dari pemantauan lokasi browser), dan menggabungkan bagian-bagian kode yang terhubung secara logis lemah menjadi satu metode (memperoleh koordinat dan suhu). Membaca kode sulit, seperti debugging dan dukungan.

Selanjutnya, kami akan mencoba mentransfer fungsionalitas yang terkait dengan memperoleh koordinat browser ke hook usePosition() terpisah untuk menghindari kesulitan yang tercantum di atas.

Bagaimana kita akan menggunakan hook usePosition()

Mari kita “dari kebalikan” dan sebelum mengimplementasikan hook itu sendiri, mari kita rencanakan bagaimana kita akan menggunakannya. Ini akan membantu kami menentukan antarmuka pengait (apa yang akan diterima dan apa yang harus dikembalikan).

Contoh paling sederhana untuk mendapatkan koordinat dan menampilkannya di layar mungkin terlihat seperti ini:

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

Hanya satu baris dengan hook usePosition() dan kita dapat beroperasi dengan latitude dan longitude . Kami bahkan belum pernah menggunakan useState() atau useEffect() secara eksplisit di sini. Berlangganan koordinat pelacakan, serta menghapus pelanggan, dienkapsulasi dalam satu hook usePosition() . Lebih jauh, keajaiban komponen ulang Bereaksi akan melakukan segalanya untuk kita. Pada awalnya, koordinat akan menjadi null atau undefined . Segera setelah koordinat diterima, komponen akan digambar ulang dan kita akan melihatnya di layar.

Implementasi usePosition()

usePosition() adalah fungsi JavaScript biasa yang terlihat seperti ini:

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

Kami akan menggunakan kait useState () untuk penyimpanan internal koordinat dan useEffect () untuk berlangganan dan berhenti berlangganan dari koordinat pelacakan. Untuk melakukan ini, kita harus mengimpornya.

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

Kami akan membuat variabel status di mana kami akan menyimpan koordinat atau kesalahan dalam memperoleh koordinat (misalnya, jika pengguna menolak untuk membagikan lokasinya).

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

Juga pada tahap ini kita dapat mengembalikan variabel yang diharapkan dari hook. Sejauh ini, tidak ada yang berguna dalam variabel-variabel ini, tetapi kami akan segera memperbaikinya.

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

Dan sekarang momen kunci implementasi adalah mendapatkan koordinat.

 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}; } 

Dalam kait useEffect() , pertama-tama kita periksa untuk melihat apakah browser mendukung fungsi deteksi koordinat. Jika fungsi tidak didukung, kami keluar dari kail dengan kesalahan. Jika tidak, kami berlangganan untuk mengubah geolokasi browser menggunakan callback onChange onChange() dan onError() (kami akan menambahkan kode mereka di bawah). Perhatikan bahwa dari kait useEffect() , kami mengembalikan fungsi anonim yang akan dieksekusi jika komponen dihapus dari layar. Dalam fungsi anonim ini, kami berhenti berlangganan dari pengawasan agar tidak menyumbat memori. Dengan demikian, seluruh logika berlangganan dan berhenti berlangganan dari pelacakan adalah dalam satu hook usePosition() .

Mari tambahkan callback yang hilang:

 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}; } 

usePosition() siap digunakan.

Pada akhirnya

Anda dapat menemukan demonstrasi hook dan implementasinya yang lebih terperinci dengan kemampuan untuk mengatur parameter pelacakan di GitHub .

Saya harap artikel ini bermanfaat bagi Anda. Pengodean yang berhasil!