ब्राउज़र निर्देशांक प्राप्त करने और ट्रैक करने के लिए एक प्रतिक्रियाशील UsePosition () हुक बनाना

अगर संक्षेप में

इस लेख में, हम ब्राउज़र जियोलोकेशन को ट्रैक करने के लिए एक usePosition() रिएक्टिव हुक usePosition() । हुड के तहत, यह हुक देशी ब्राउज़र ऑब्जेक्ट नेविगेटर.गेओलोकेशन के getCurrentPosition() और watchPosition() विधियों का उपयोग करेगा। मैंने हुक का अंतिम संस्करण गिटहब और एनपीएम पर प्रकाशित किया।

क्यों सिद्धांत में एक usePosition() हुक बनाएँ

प्रतिक्रिया में हुक के महत्वपूर्ण लाभों में से एक एक जगह (हुक में) तार्किक रूप से संबंधित कोड अंशों को अलग करने की क्षमता है, जबकि तार्किक रूप से असंबंधित कोड टुकड़े मिश्रण करने की आवश्यकता को टालना, उदाहरण के लिए, componentDidMount() विधि।

मान लें कि हम ब्राउज़र निर्देशांक ( latitude और longitude ) प्राप्त करना चाहते हैं और निर्देशांक प्राप्त करने के बाद, इस क्षेत्र में तीसरे पक्ष की सेवा से मौसम के पूर्वानुमान या वर्तमान तापमान का अनुरोध करें। रिएक्ट में इन दो कार्यात्मकताओं (निर्देशांक और तापमान का अनुरोध करना) का कोड अक्सर एक componentDidMount() पद्धति के अंदर रखा जाता है। इस स्थिति में, componentWillUnmount() WillUnmount () विधि आमतौर पर " क्लीन अप" होती है, जो ब्राउज़र स्थान की निगरानी को रोकने के लिए clearWatch () विधि को कॉल करती है। इस तरह के दृष्टिकोण से तरीकों का आकार बढ़ जाता है, कोड के तार्किक रूप से जुड़े हुए हिस्सों को भागों में विभाजित करता है (ब्राउज़र के स्थान की निगरानी करने से अलग से सदस्यता लेना और अनसब्सक्राइब करना), और कोड के तार्किक रूप से जुड़े हिस्सों को एक विधि में जोड़ता है (निर्देशांक और तापमान प्राप्त करना)। डिबगिंग और समर्थन के रूप में पढ़ना कोड मुश्किल है।

इसके बाद, हम ऊपर सूचीबद्ध कठिनाइयों से बचने के लिए ब्राउज़र के निर्देशांक को एक अलग usePosition() हुक में जोड़ने से जुड़ी कार्यक्षमता को स्थानांतरित करने का प्रयास करेंगे।

हम कैसे उपयोग करेंगे usePosition() हुक

चलो "विपरीत से" जाएं और हुक को लागू करने से पहले, आइए योजना बनाएं कि हम इसका उपयोग कैसे करेंगे। इससे हमें हुक इंटरफ़ेस निर्धारित करने में मदद मिलेगी (यह क्या स्वीकार करेगा और क्या लौटना होगा)।

निर्देशांक प्राप्त करने और उन्हें स्क्रीन पर प्रदर्शित करने का सबसे सरल उदाहरण इस तरह दिखाई दे सकता है:

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

usePosition() हुक के साथ सिर्फ एक लाइन और हम latitude और longitude निर्देशांक के साथ काम कर सकते हैं। हमने यहां भी स्पष्ट रूप से उपयोग नहीं किया है। ट्रैकिंग निर्देशांक, साथ ही एक ग्राहक को हटाने के लिए एक सदस्यता, एक usePosition() हुक में usePosition() । इसके अलावा, रिएक्ट घटकों को फिर से जोड़ने का जादू हमारे लिए सब कुछ करेगा। शुरुआत में, निर्देशांक null या undefined । जैसे ही निर्देशांक प्राप्त होते हैं, घटक फिर से तैयार हो जाएगा और हम उन्हें स्क्रीन पर देखेंगे।

usePosition() कार्यान्वयन usePosition()

हमारा usePosition() हुक एक नियमित जावास्क्रिप्ट फ़ंक्शन है जो इस तरह दिखता है:

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

हम निर्देशांक के आंतरिक भंडारण के लिए यूज़स्टेट () हुक का उपयोग करेंगे और ट्रैकिंग निर्देशांक से सदस्यता लेने और सदस्यता रद्द करने के लिए उपयोग करेंगे। ऐसा करने के लिए, हमें उन्हें आयात करना होगा।

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

हम राज्य चर बनाएंगे जिसमें हम निर्देशांक या निर्देशांक प्राप्त करने में त्रुटि को संग्रहीत करेंगे (उदाहरण के लिए, यदि उपयोगकर्ता अपने स्थान को साझा करने से इनकार करता है)।

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

इसके अलावा इस स्तर पर हम उन चर को वापस कर सकते हैं जो हुक से अपेक्षित हैं। अब तक, इन चरों में कुछ भी उपयोगी नहीं है, लेकिन हम इसे जल्द ही ठीक कर देंगे।

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

और अब कार्यान्वयन का महत्वपूर्ण क्षण निर्देशांक हो रहा है।

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

useEffect() हुक में, हम पहले यह देखने के लिए useEffect() हैं कि ब्राउज़र समन्वय पहचान कार्यक्षमता का समर्थन करता है या नहीं। यदि कार्यक्षमता समर्थित नहीं है, तो हम एक त्रुटि के साथ हुक से बाहर निकलते हैं। अन्यथा, हम onError() और onError() का उपयोग करके ब्राउज़र के जियोलोकेशन को बदलने की सदस्यता लेते हैं (हम उनके कोड को नीचे जोड़ देंगे)। ध्यान दें कि useEffect() हुक से, हम एक अनाम फ़ंक्शन लौटाते हैं जो कि यदि घटक प्रदर्शन से हटा दिया जाता है तो निष्पादित किया जाएगा। इस अनाम फ़ंक्शन में, हम निगरानी से अनसब्सक्राइब कर रहे हैं ताकि मेमोरी बंद न हो। इस प्रकार, ट्रैकिंग से सदस्यता लेने और सदस्यता रद्द करने का पूरा तर्क एक usePosition() हुक में है।

चलिए गायब कॉलबैक को जोड़ते हैं:

 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() हुक उपयोग के लिए तैयार है।

अंत में

आप हुक के प्रदर्शन और इसके अधिक विस्तृत कार्यान्वयन को GitHub पर ट्रैकिंग पैरामीटर सेट करने की क्षमता पा सकते हैं।

मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी रहा होगा। सफल कोडिंग!