स्टेट हुक का उपयोग करना | शुरुआती के लिए ट्यूटोरियल
रिएक्ट कॉन्फ अक्टूबर 2018 में रिएक्ट फंक्शन घटकों में राज्य और साइड-इफेक्ट्स का उपयोग करने के तरीके के रूप में रिएक्ट हुक पेश किए गए थे। जबकि फ़ंक्शन घटकों को पहले कार्यात्मक स्टेटलेस घटक (एफएससी) कहा जाता है, वे अंततः रिएक्ट हुक के साथ राज्य का उपयोग करने में सक्षम होते हैं। इसलिए, बहुत से लोग उन्हें अब फ़ंक्शन घटकों के रूप में संदर्भित करते हैं।
संक्षेप में, हुक रिएक्ट 16.8 में एक नया अतिरिक्त है। वे आपको एक वर्ग लिखे बिना राज्य और अन्य प्रतिक्रिया सुविधाओं का उपयोग करने देते हैं।
इस लेख में, हम रिएक्ट स्टेट हुक को देखते हैं।
राज्य हुक
यह सभी अंतर्निर्मित हुकों में सबसे अधिक उपयोग किया जाता है। यह |_+_| के समान है, हम इसका उपयोग अपने ऐप की स्थिति निर्धारित करने के लिए करते हैं।
प्रारंभ में, ES6 वर्ग के साथ, हम सेटस्टेट का उपयोग करके इस तरह की स्थिति निर्धारित करते हैं:
कैश ऐप अकाउंट पैसे से बंद
this.setStateयह हम अपने रिएक्ट ऐप्स के घटकों को कैसे परिभाषित करते हैं। प्रॉप्स कंपोनेंट के इनपुट्स को होल्ड करते हैं: |_+_|। यह राज्य घटक की स्थिति रखता है। इस राज्य में, इसमें उपयोगकर्ता नाम संपत्ति होती है, जिसमें उपयोगकर्ता का उपयोगकर्ता नाम और पासवर्ड संपत्ति होती है जिसमें उपयोगकर्ता का पासवर्ड होता है। जब उपयोगकर्ता इनपुट टैग में किसी प्रकार का प्रवेश करता है, तो |_+_| फ़ंक्शन कॉल का उपयोग वर्तमान उपयोगकर्ता नाम और पासवर्ड के साथ Statethis.state को अद्यतन करने के लिए किया जाता है।
हुक का उपयोग करके, उपरोक्त इस तरह किया जा सकता है:
class LoginComponent extends React.Component { constructor(props) { super(props) this.state = { username: '', password: '' } } login() { axios.post('/api/login/', this.state).then((v) => { // ... }, (err) => { // ... }) } render() { return ( this.setState({username: this.value})} /> this.setState({password: this.value})} /> this.login()}>Login ); } } यह हमारे ES6 LoginComponent वर्ग के बराबर है। किसी फ़ंक्शन में परिभाषित इस प्रकार के घटक को स्टेटलेस घटक के रूप में जाना जाता है, लेकिन हुक के आगमन के साथ, अब इस स्टेटलेस घटक के लिए अपने स्वयं के राज्य होना संभव है। इसके साथ, उन्हें अब |_+_| कहा जाता है।
यह |_+_| एक कार्यात्मक घटक है। जब हम इनपुट बॉक्स में कोई मान इनपुट करते हैं तो यह लॉगिन विवरण में मान सेट करता है।
यहां नई चीज यूजस्टेट फ़ंक्शन है। चलो इसके बारे में बात करें:
यूज़स्टेट हुक (स्टेट हुक) है जैसा कि हमने कहा था कि पहले स्टेट हुक हमें अपने कंपोनेंट की स्थिति में हेरफेर करने की अनुमति देते हैं। UseState एक पैरामीटर के रूप में घटक की प्रारंभिक स्थिति को स्वीकार करता है। जैसे हमारे ऐप में |_+_|, प्रारंभिक अवस्था है
हम अपना प्रारंभिक उपयोगकर्ता नाम और पासवर्ड खाली स्ट्रिंग के रूप में सेट करते हैं, इसलिए जब उपयोगकर्ता अपना उपयोगकर्ता नाम/पासवर्ड दर्ज करता है तो हम इसे ऊपर उनके संबंधित क्षेत्रों में संग्रहीत करते हैं। अगर हमने ऐसा किया होता |_+_|), तो वर्तमान स्थिति होगी:
setState()अब हम सम्मान के साथ यूज़स्टेट हुक का एक सामान्य कार्य कर सकते हैं। इस तरह के मापदंडों के लिए:
// login.component.js import { useState } from 'react' function handleLogin(login) { axios.post('/api/login/', login).then((v) => { // ... }, (err) => { // ... }) } function LoginComponent() { const [loginDetails, setLoginDetails] = useState({username: '', password: ''}) return ( setLoginDetails({username: this.value})} /> setLoginDetails({password: this.value})} /> handleLogin(loginDetails)}>Login ); } तो, उपयोग करने के लिए अपनी प्रारंभिक स्थिति पास करेंस्टेट फ़ंक्शन ऐसा करने का पर्याय है:
functional componentsES6 घटक वर्गों में।
नोट: यहां अंतर यह है कि इस राज्य में राज्यों को वस्तुओं में संग्रहीत किया जाता है लेकिन उपयोगस्टेट का उपयोग करने में ऐसा नहीं है। उदाहरण के लिए, यदि आपके पास राज्य के रूप में एकल पूर्णांक आयु वाला घटक है। ES6 घटक वर्गों का उपयोग करके, इसे इस तरह दर्शाया जाएगा:
पग स्वैप और बेचें
LoginComponentइस तरह पहुँचा और हेरफेर किया गया:
useState({username: '', password: ''})लेकिन राज्य हुक का उपयोग करके, आप सीधे राज्य आयु मान को सीधे पास करते हैं:
{ username: '', password: '' } यहाँ की अवस्था का कोई वस्तु होना आवश्यक नहीं है - हालाँकि यदि आप चाहें तो यह हो सकता है।
यूज़स्टेट एक जोड़ी देता है: वर्तमान स्थिति और फ़ंक्शन जो हमें वर्तमान स्थिति को अपडेट करने देता है।
useState({username: 'nnamdi', password: '123456'}यहाँ, |_+_| वर्तमान स्थिति है और |_+_| वह फ़ंक्शन है जो राज्य को अपडेट करेगा |_+_|। जब से हम पास हुए |_+_| उपयोग करने के लिए राज्य, |_+_| होगा |_+_| प्रारंभिक रेंडर के लिए। दरअसल, useState एक सरणी देता है, सरणी में पहला प्रारंभिक स्थिति है और अंतिम अद्यतन फ़ंक्शन है, यहां हमने नष्ट कर दिया |_+_| और |_+_| लौटाए गए सरणी से।
अद्यतन () पायथन
{username: 'nano', password: '123456'} हमारे सामान्य उपयोगस्टेट फ़ंक्शन को अपडेट करना:
useState(initialState) अद्यतन राज्य
हमारे दो उदाहरणों को देखते हुए,
लॉगिनघटक
// ... class LoginComponent extends React.Component { constructor() { this.state = { username: '', password: '' } } // ... } हमने राज्य {उपयोगकर्ता नाम: '', पासवर्ड:''} को अपडेट करने के लिए setLoginDetails (दूसरा लौटाया गया मान फॉर्म यूज़स्टेट (...) कॉल) का उपयोग किया।
जब भी उपयोगकर्ता इनपुट बॉक्स में कुछ दर्ज करता है, तो इनपुट चेंज इवेंट सेटलॉगिन विवरण को कॉल करता है, यह लॉगिन विवरण अपडेट करता है। यदि उपयोगकर्ता दर्ज किया गया है:
class IntComponent extends React.Component { construcor() { this.state = { age: 0 } } } loginDetails {उपयोगकर्ता नाम: 'Vnano', पासवर्ड: '957025'} होगा
IntComponent उदाहरण में,
class IntComponent extends React.Component { // ... render() { return ( My age is: {this.state.age} this.setState(age: this.state.age + 1)}> Increment Age ); } } जब बटन पर क्लिक किया जाता है तो सेटएज उम्र को एक से बढ़ा देता है।
उदाहरणों में ध्यान दें कि हम इसे कैसे नहीं जोड़ते हैं। (जैसे हम हमेशा ES6 कक्षाओं में करते हैं) राज्य और अद्यतन फ़ंक्शन दोनों के लिए। हुक का उपयोग करने का यह एक अच्छा कारण है :)।
बेशक, आपको अपडेट फ़ंक्शन को अपने राज्य के समान प्रकार से कॉल करना होगा।
एकाधिक राज्य चर
हमारे फ़ंक्शन घटकों में कई राज्य चर हो सकते हैं।
प्रदर्शित करने के लिए, हम उपयोगकर्ता नाम और पासवर्ड राज्यों को अलग-अलग प्रबंधित करने के लिए अपने लॉगिन कॉम्पोनेंट को संशोधित कर सकते हैं:
function IntComponent () { const [age,setAge] = useState(0) // ... } देखिए, हमने एक ही कॉम्पोनेन्ट में दो बार यूजस्टेट को कॉल किया। अब हम स्वतंत्र रूप से प्रत्येक राज्य का प्रबंधन कर सकते हैं।
const [loginDetails, setLoginDetails] = useState({username: '', password: ''}) कार्यात्मक अद्यतन
हम अपने अपडेट फंक्शन में केवल स्टेट वैल्यू पास कर रहे हैं। हम एक फ़ंक्शन को अपडेट फ़ंक्शन में पास करके भी अपने राज्य को अपडेट कर सकते हैं।
हमारे LoginComponent का उपयोग करते हुए, मान लें कि हम चाहते हैं
loginDetailsयह काफी फैंसी है, लेकिन यह इसे समझाता है।
हमने जोड़ने के लिए एक बटन जोड़ा |_+_| उपयोगकर्ता नाम के लिए। देखें, सेट यूज़रनेम एक फंक्शन लेता है |_+_|। पिछला उपयोगकर्ता नाम उपयोगकर्ता नाम के पिछले मान पर मैप करता है। फ़ंक्शन इसे एक तर्क के रूप में स्वीकार करता है और इसमें s -dinho जोड़ता है।
यदि हमारा पिछला उपयोगकर्ता नाम |_+_| है, तो बटन पर क्लिक करने पर फ़ंक्शन को |_+_| के साथ कॉल किया जाएगा, जो लौटाई गई स्ट्रिंग |_+_| वर्तमान स्थिति होगी।
हाई स्कूल के छात्रों के लिए मशीन लर्निंग
वेतन वृद्धि और कमी का बेहतर उदाहरण होगा:
setLoginDetailsआलसी आरंभीकरण
महंगा इनिशियलाइज़ेशन हमें गंभीर रूप से महंगा पड़ सकता है और इससे उपयोगकर्ता का अनुभव खराब हो सकता है। इसे दूर करने के लिए आलसी आरंभीकरण का उपयोग करना है। आलसी आरंभीकरण क्या है?
यह किसी पहचानकर्ता या वस्तु के लिए मूल्य के निर्माण में देरी करने की एक युक्ति है जब तक कि पहली बार इसकी आवश्यकता न हो। यदि प्रक्रिया महंगी है तो हम उपयोगकर्ता के अनुभव पर अंतराल से बचने के लिए इसे तुरंत प्रारंभ नहीं करते हैं। फिर, जब उपयोगकर्ता द्वारा इसकी आवश्यकता होती है तो इसे बनाया जाता है।
हुक हमें आलसी आरंभीकरण की रणनीति प्रदान करता है। यदि प्रारंभिक अवस्था एक महंगी गणना है। सीधे राज्य की गणना करने और उसे उपयोग करने के लिए पास करने के बजाय:
loginDetailsहम इसके बजाय एक फ़ंक्शन पास कर सकते हैं, जो प्रारंभिक रेंडर पर निष्पादित होगा:
{username: '', password: ''}बाद के पुन: प्रस्तुत करने पर, longOperation नहीं कहा जाता है।
vmware kali linux में वाईफाई कैसे इनेबल करें
अद्यतन वस्तुओं को मर्ज करना
रिएक्ट हुक पिछले राज्य को एक घटक की वर्तमान स्थिति के साथ विलय नहीं करता है। वे केवल वर्तमान स्थिति लौटाते हैं और पिछली स्थिति को त्याग देते हैं।
अब यदि हम चाहें तो पुराने राज्य का उपयोग कैसे करें या दोनों राज्यों का विलय कैसे करें? याद रखें, जब हम उपयोग करने के लिए एक फ़ंक्शन पास करते हैं, तो यह एक तर्क को स्वीकार करता है जो हमारे घटक की पिछली स्थिति है। इससे हम राज्यों का इस तरह विलय कर सकते हैं:
loginDetailsनिष्कर्ष
इस पृष्ठ पर हमने रिएक्ट द्वारा प्रदान किए गए एक हुक के बारे में सीखा, जिसे यूज़स्टेट कहा जाता है। हम इसे कभी-कभी स्टेट हुक के रूप में भी संदर्भित करने जा रहे हैं। यह हमें स्थानीय स्थिति को रिएक्ट फ़ंक्शन घटकों में जोड़ने देता है - जो हमने पहली बार किया था!
हमने कुछ और भी सीखा कि हुक क्या होते हैं। हुक ऐसे कार्य हैं जो आपको फ़ंक्शन घटकों से प्रतिक्रिया सुविधाओं में शामिल होने देते हैं। उनके नाम हमेशा उपयोग से शुरू होते हैं, और ऐसे और भी हुक हैं जिन्हें हमने अभी तक नहीं देखा है।
और अधिक जानें
#प्रतिक्रिया #प्रतिक्रिया #जावास्क्रिप्ट