परिचय

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

पहिये को दोबारा बनाने की कोई आवश्यकता नहीं है!

विभिन्न फ्रेमवर्क (रिएक्ट, व्यू इत्यादि) के लिए पुन: प्रयोज्य कार्यों के पुस्तकालयों के निर्माता और उपयोगकर्ता इस दृष्टिकोण को ऐसी प्रतिक्रिया के साथ देखते हैं।

Vue के लिए - यह, उदाहरण के लिए, vueuse है। (Vue उपयोगिता कार्य)

रिएक्ट के लिए, आज का सबसे अच्छा रिएक्ट बिल्कुल नया और सक्रिय रूप से समर्थित रिएक्ट है (रिएक्ट हुक के लिए)

ये पुस्तकालय किस समस्या का समाधान करते हैं?

डेवलपर्स के जीवन को कम चुनौतीपूर्ण बनाने के लिए उनकी आवश्यकता है। उन सभी संभावित कार्यों को पहले से तैयार कर लें जिनकी डेवलपर को अपने काम में आवश्यकता हो सकती है। यदि वह तैयार पैकेज का उपयोग करेगा, तो वह कम से कम अपना समय बचाएगा, और कोड में पाई गई त्रुटि या बग की संभावना को कम से कम करेगा, क्योंकि प्रत्येक फ़ंक्शन का अलग से परीक्षण किया जाता है। उपयोग का मामला वास्तव में बहुत बड़ा है। उदाहरण के लिए, ऐसे पुस्तकालयों की सहायता से आप यह कर सकते हैं:

1. वेब-सॉकेट का उपयोग करें
2. प्रश्न करें
3. उपयोगकर्ता के भौगोलिक स्थान का पता लगाएं
4. लोकलस्टोरेज का उपयोग करें
5. आसानी से मोडल विंडो बनाएं

और यह सभी संभावित मामलों का एक छोटा सा हिस्सा है।

VueUse बढ़िया क्यों है?

VueUse, Vue के लिए सबसे लोकप्रिय ऐसी लाइब्रेरी में से एक है। आख़िरकार, यह सबसे बुनियादी पुन: प्रयोज्य कार्यक्षमता प्रदान करता है। कुछ लोग सोचते हैं कि Vue एप्लिकेशन बनाते समय यह एक मानक है, और इसके बिना इसे बनाना असंभव है। असहमत होना कठिन है, पुस्तकालय में दो सौ से अधिक कार्य हैं और यह ऊपर वर्णित विचारधारा का पालन करता है।

प्रतिक्रिया के लिए सर्वोत्तम विकल्प

एक महान विचार को पूरी तरह से साकार करने के सर्वोत्तम तरीके के रूप में व्यूज़ की प्रशंसा करते समय, हमें शीर्ष 1 जेएस लाइब्रेरी/फ्रेमवर्क - रिएक्ट के बारे में नहीं भूलना चाहिए। और यहां तो स्थिति और भी अप्रिय थी. आख़िरकार, रिएक्ट के लिए कोई स्थापित, विश्वसनीय, व्यापक और एकमात्र लाइब्रेरी नहीं है। विभिन्न डेवलपर्स की ओर से कुछ प्रयास किए गए, लेकिन उनमें से एक में बहुत कम हुक हैं (रिएक्ट में वे हुक हैं, हाँ), कहीं-कहीं असंसाधित एपीआई का उपयोग करके बनाए गए हुक हैं।

स्थिति को सुधारने के लिए, और व्यूयूज़ के विकल्प के रूप में, लेकिन प्रतिक्रिया में, प्रतिक्रिया का उपयोग आया।

आइए, उदाहरण के लिए, एक लाइब्रेरी की मदद से और केवल वेनिला रिएक्ट का उपयोग करके सूची प्रबंधन बनाने का प्रयास करें।

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

हमें मूल्य (सरणी मान), सेट (किसी अन्य सरणी मान निर्दिष्ट करने के लिए फ़ंक्शन), पुश (सरणी में मान जोड़ने के लिए फ़ंक्शन), रिमूवएट (इंडेक्स द्वारा हटाएं), अपडेटएट (इंडेक्स द्वारा मूल्य बदलें), क्लियर (स्पष्ट) मिलता है सरणी), रीसेट (डिफ़ॉल्ट मान पर रीसेट करें)
अब वेनिला प्रतिक्रिया पर इन सभी राज्यों और कार्यों को प्राप्त करने के लिए कोड:

const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index   1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

और हमें बिल्कुल वही तरीके और स्थिति मिलती है। और कोड बहुत छोटा और सरल है

लाइब्रेरी को सक्रिय रूप से बनाए रखा जाता है, नए हुक जोड़े जाते हैं, दस्तावेज़ीकरण के साथ एक सुविधाजनक वेबसाइट होती है, हुक सरल स्रोतों का उपयोग करते हैं और अधिक विस्तृत एपीआई रखते हैं। अब 80 से अधिक हुक क्रियान्वित हैं। मैं यह भी नोट करना चाहता हूं कि बिल्कुल नए कार्यान्वयन हैं, जो मैंने कहीं और नहीं देखे हैं:

• पेंट का उपयोग करें - उस पर चित्र बनाने के लिए कैनवास बनाने के लिए। आप कैनवास सेट करते हैं, और हुक आपको उस पर चित्र बनाने, ब्रश का आकार, रंग, अस्पष्टता और स्थिति "ड्रा" या "अब ड्रा" समायोजित करने की अनुमति देता है
• स्टॉपवॉच का उपयोग करें - स्टॉपवॉच बनाने के लिए
• आईड्रॉपर का उपयोग करें - रंग चयन के लिए ड्रॉपर का उपयोग करने के लिए
• उपयोगकर्ता डिवाइस या ब्राउज़र एपीआई (यूज़मेमोरी, यूज़ऑपरेटिंग सिस्टम, यूज़क्लिपबोर्ड, यूज़ब्राउज़रलैंग्वेज, यूज़हैश इत्यादि) के साथ काम करने के लिए बड़ी मात्रा में हुक

निष्कर्ष

ऐसे पुस्तकालयों को एक विकास मानक बनना चाहिए, सिर्फ इसलिए कि वे आपको उन छोटे विवरणों पर ध्यान केंद्रित करने की अनुमति नहीं देते हैं जिनका आविष्कार बहुत पहले ही हो चुका है, आपको बस उन्हें आयात करने और उनका उपयोग करने की आवश्यकता है।

लिंक का पुनः उपयोग करें

npm — github