प्रतिक्रिया हुक: मेमो का उपयोग करना () - कॉलबैक () - संदर्भ () - राज्य ()

ब्लॉग

प्रतिक्रिया हुक: मेमो का उपयोग करना () - कॉलबैक () - संदर्भ () - राज्य ()

प्रतिक्रिया हुक: मेमो का उपयोग करना () - कॉलबैक () - संदर्भ () - राज्य ()

परिचय

इस लेख में, हम ReactJS में useMemo() Hook, useCallback() Hook, useContext() Hook, useState() Hook और इसे एप्लिकेशन में कैसे उपयोग किया जा सकता है, के बारे में सीखा।

1. उपयोग मेमो () हुक

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

UseEffect() हुक के विपरीत, useMemo() हुक हर बार जब आप इसकी निर्भरता को बदलते हैं तो ट्रिगर नहीं होता है।

मेमोइज्ड फ़ंक्शन हमेशा यह देखने के लिए जाँच करेगा कि क्या पिछले रेंडर के बाद से निर्भरता को बदलने की आवश्यकता है। यदि ऐसा है, तो यह फ़ंक्शन निष्पादित करता है और परिणाम देता है। और अगर यह झूठा लौटाता है, जो बताता है कि कुछ भी नहीं बदला गया है, तो यह अंतिम निष्पादन से कैश्ड परिणाम वापस कर देगा। तो, इस तरह useMemo() हुक रिएक्ट एप्लिकेशन में प्रदर्शन को बेहतर बनाने में मदद करता है।

वाक्य - विन्यास

const memoizedValue = useMemo(() => computefunction(a, b), [a, b]);

जहां ए, बी वे मान हो सकते हैं जिन्हें संसाधित करने की आवश्यकता होती है और ए और बी स्क्वायर ब्रैकेट में निर्दिष्ट होते हैं जब फ़ंक्शन को संसाधित करने की आवश्यकता होती है।

useMemo() हुक मेमोइज़ एक फ़ंक्शन लेता है जिसे याद करने की आवश्यकता होती है और मानों की एक सरणी जो बदल जाती है, ज्ञापन को अमान्य कर देगी।

अब आइए डेमो देखें और प्रदर्शन अनुकूलन के लिए इसका उपयोग कैसे किया जाता है।

RandomWords नाम का एक घटक बनाएं जो एक बटन के क्लिक पर शब्दों को बेतरतीब ढंग से लौटाएगा,

import React, { useState } from 'react' function RandomWords() { const [count, setCount] = useState(0) const [wordIndex, setWordIndex] = useState(0) const words = ['This', 'is', 'React', 'Application', 'for', 'Testing', 'By', 'Priyanka'] const word = words[wordIndex] const computeLetterCount = (word) => { let i = 0; while (i { computeLetterCount(word) }; return (

Compute number of letters (slow)

'{word}' has {letterCount(word)} letters

{ const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1; setWordIndex(next); }} > Next word

Increment a counter (fast)

Counter: {count}

setCount(count + 1)}>Increment ) } export default RandomWords

आउटपुट नीचे के रूप में प्रदर्शित किया जाएगा,

जैसा कि हम देखते हैं कि किसी भी बटन पर क्लिक करने पर सभी तरीके प्रस्तुत किए जाते हैं जो प्रदर्शन को कम करते हैं।

तो यहाँ हम useMemo() हुक का उपयोग करेंगे,

import React, { useState,useMemo } from 'react' function RandomWords() { const [count, setCount] = useState(0) const [wordIndex, setWordIndex] = useState(0) const words = ['This', 'is', 'React', 'Application', 'for', 'Testing', 'By', 'Priyanka'] const word = words[wordIndex] const computeLetterCount = (word) => { let i = 0; while (i computeLetterCount(word), [word]); return (

Compute number of letters (slow)

'{word}' has {letterCount} letters

{ const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1; setWordIndex(next); }} > Next word

Increment a counter (fast)

Counter: {count}

setCount(count + 1)}>Increment ) } export default RandomWords

अब, हम जो आउटपुट देखते हैं वह काफी तेज़ होगा और यह केवल दूसरे बटन के बजाय पहले बटन के लिए विलंबित आउटपुट लौटाएगा।

तो, useMemo() हुक का उपयोग उस मामले में किया जाना चाहिए जहां एपीआई को बदलना, एपीआई से डेटा प्राप्त करना, या कोई अन्य ऑपरेशन जहां एक ही पृष्ठ पर कई ऑपरेशन चल रहे हों।

2. उपयोग कॉलबैक () हुक

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

आइए डेमो देखें।

4 घटक बनाएं।

शीर्षक.जेएस

//g.co/रिकवरी
import React from 'react' function Title() { console.log('Title component rendered') return ( React Title ) } export default Title

Button.js

import React from 'react' function Button({count,handleClick}) { console.log('Button Component rendered') return (

Counter : {count}

Increment Counter ) } export default Button

टेक्स्टबॉक्स.जेएस

import React from 'react' function Textbox({name,handleClick}) { console.log('Textbox Rendered') return ( ) } export default Textbox

जनक.जेएस

import React, { useState } from 'react'; import Title from './components/Title'; import Button from './components/Button'; import Textbox from './components/Textbox'; function Parent() { const [count, setCount] = useState(0) const [name, setName] = useState('') const incrementCounter = () => { setCount(count + 1) } const updateName = (e) => { setName(e.target.value) } return ( Name is {name} ); } export default Parent;

आउटपुट नीचे के रूप में प्रदर्शित किया जाएगा।

प्रारंभ में, यह नीचे के रूप में प्रस्तुत करेगा।

यह छवि का शीर्षक है

एक बटन के क्लिक पर, हम कंसोल में जांच सकते हैं कि एक घटक में परिवर्तन होने पर भी सभी घटकों को फिर से प्रस्तुत किया जाता है।

यह छवि का शीर्षक है

अब, वही - भले ही टेक्स्टबॉक्स में कोई बदलाव किया गया हो, सभी घटकों को फिर से प्रस्तुत किया जाता है।

यह छवि का शीर्षक है

इसलिए, घटकों के पुन: प्रतिपादन से बचने के लिए, कॉलबैक () का उपयोग करने की आवश्यकता है।

अब, जबकि निर्यात घटक React.Memo() फ़ंक्शन जोड़ता है, यह केवल तभी प्रस्तुत करेगा जब प्रॉप्स या स्थिति में कोई बदलाव होगा।

शीर्षक.जेएस

import React from 'react' function Title() { console.log('Title component rendered') return ( React Title ) } export default React.memo(Title)

Button.js

import React from 'react' function Button({count,handleClick}) { console.log('Button Component rendered') return (

Counter : {count}

मैं dmt कहाँ से खरीद सकता हूँ
Increment Counter ) } export default React.memo(Button)

टेक्स्टबॉक्स.जेएस

import React from 'react' function Textbox({name,handleClick}) { console.log('Textbox Rendered') return ( ) } export default React.memo(Textbox)

अब, आउटपुट की जाँच करें। प्रारंभ में, यह सभी 3 घटकों को प्रस्तुत करेगा।

यह छवि का शीर्षक है

बटन पर क्लिक करने के बाद, शीर्षक घटक प्रस्तुत नहीं किया जाएगा।

यह छवि का शीर्षक है

इसलिए, री-रेंडरिंग घटकों के मुद्दे को हल करने के लिए, यदि घटक में कोई परिवर्तन नहीं होता है तो कॉलबैक () हुक का उपयोग किया जाता है।

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

अब पेरेंट.जेएस में कॉलबैक फ़ंक्शन जोड़ें

import React, { useState,useCallback } from 'react' import Title from './Title'; import Button from './Button'; import Textbox from './Textbox'; function Parent() { const [count, setCount] = useState(0) const [name, setName] = useState('') const incrementCounter = useCallback(() => { setCount(count + 1) },[count]) const updateName = useCallback((e) => { setName(e.target.value) },[name]) return ( Name is {name} ) } export default Parent

आउटपुट नीचे के रूप में प्रदर्शित किया जाएगा।

यह छवि का शीर्षक है

अब, एक बटन के क्लिक पर, केवल बटन घटक प्रस्तुत किया जाता है।

यह छवि का शीर्षक है

अब, टेक्स्टबॉक्स में टाइप करने पर, टेक्स्टबॉक्स घटक प्रस्तुत किया जाता है।

यह छवि का शीर्षक है

तो, इस तरह, हम प्रदर्शन को अनुकूलित कर सकते हैं।

useCallback() हुक केवल एक घटक को प्रस्तुत करके कोड लिखने और घटकों को व्यवस्थित करने का एक कुशल तरीका प्रदान करता है जब इसकी आवश्यकता होती है जो प्रदर्शन सुधार और कोड अनुकूलन भी प्रदान करता है। इसका उपयोग React.memo() के साथ किया जाता है जो यह सुनिश्चित करता है कि कोई अतिरिक्त रेंडर अनावश्यक रूप से नहीं किया जाना चाहिए। तो, इस तरह पूरा प्रवाह काम करता है।

उपयोग कॉलबैक () और उपयोग मेमो () का उपयोग कब करें?

दो मुख्य कारण हैं कि दोनों हुक रिएक्ट में क्यों बने हैं,

  1. संदर्भात्मक समानता
  2. कम्प्यूटेशनल रूप से महंगी गणना।

यूज़मेमो () और यूज़ कॉलबैक () हुक के बीच अंतर?

यह छवि का शीर्षक है

3. useContext () हुक

प्रतिक्रिया प्रसंग क्या है

रिएक्ट में, मान लीजिए कि हमारे पास मूल घटक है जिसमें बाल घटकों के 3 स्तर हैं,

यह छवि का शीर्षक है

उपरोक्त छवि की तरह, यदि हम मूल घटक से चाइल्ड कंपोनेंट C में कोई डेटा पास करना चाहते हैं, तो रिएक्ट के अनुसार हमें चाइल्ड कंपोनेंट c के लिए उपलब्ध होने के लिए प्रत्येक स्तर पर प्रॉप्स पास करने की आवश्यकता है। यह समाधान तब संभव हो सकता है जब कई बाल घटक अनेक हों। तो, रिएक्ट हुक एक अवधारणा कॉल प्रदान करता है संदर्भ।

रिएक्ट कॉन्टेक्स्ट एपीआई आपको कंपोनेंट ट्री के विभिन्न स्तरों पर डेटा को आसानी से एक्सेस करने की अनुमति देता है, हर स्तर पर प्रोप पास किए बिना, जैसा कि हमने पिछली श्रृंखला में संदर्भ बनाकर देखा है, अब इसमें, इसे यूज़कॉन्टेक्स्ट () हुक का उपयोग करके प्राप्त किया जाएगा।

उपयोग कॉन्टेक्स्ट () हुक

इस हुक का उपयोग प्रत्येक घटक पेड़ को निर्दिष्ट किए बिना एक घटक से दूसरे घटक में डेटा पास करने के लिए किया जाता है।

आइए डेमो देखें,

उपरोक्त छवि के अनुसार एक पदानुक्रम बनाएं।

4 कार्यात्मक घटक बनाएं,

चाइल्डसी.जेएस

import React from 'react' function ChildC() { return ( Child Component at level 3 ) } export default ChildC

चाइल्डबी.जेएस

import React from 'react' import ChildC from './ChildC' function ChildB() { return ( Child Component at level 2 ) } export default ChildB

चाइल्डए.जेएस

import React from 'react' import ChildB from './ChildB' function ChildA() { return ( Child Component at level 1 ) } export default ChildA

पेरेंटकंपोनेंट.जेएस

import React from 'react' import ChildA from './ChildA' function ParentComponent() { return ( ) } export default ParentComponent

और App.js . में आयात करें

import React from 'react'; import './App.css'; import ParentComponent from './components/ParentComponent'; function App() { return ( ); } export default App;

अब बनाने के लिए हमारे पास 3 चरण हैं,

सबसे पहले, App.js में एक प्रसंग बनाएँ।

का उपयोग करके मूल्य प्रदान करें।

संदर्भ के मूल्य का उपयोग करके .

संदर्भ वस्तु बनाएं और नीचे के रूप में App.js में मान पास करें।

import React from 'react'; import './App.css'; import ParentComponent from './components/ParentComponent'; export const UserContext = React.createContext() function App() { return ( ); } export default App;

और ChildC.js में मूल्य का उपभोग करें

import React from 'react' import {UserContext} from '../App' function ChildC() { return ( Child Component at level 3 { user => { return Context value is {user} } } ) } export default ChildC

आउटपुट नीचे के रूप में प्रदर्शित होगा।

यह छवि का शीर्षक है

अब, देखते हैं कि संदर्भ का उपयोग करके कितने मानों का उपभोग किया जा सकता है।

import React from 'react'; import './App.css'; import ParentComponent from './components/ParentComponent'; export const UserContext = React.createContext() export const CategoryContext = React.createContext() function App() { return ( ); } export default App;

अब, ChildB.js में श्रेणी कॉन्टेक्स्ट आयात करें।

import React from 'react' import ChildC from './ChildC' import {CategoryContext} from '../App' function ChildB() { return ( Child Component at level 2 { category => { return Category is {category} } } ) } export default ChildB

आउटपुट नीचे के रूप में प्रदर्शित किया जाएगा।

यह छवि का शीर्षक है

अब, हम यह देखने के लिए कि नेस्टेड उपभोक्ता कैसे काम करता है, हम ChildC.js में categoryContext आयात करेंगे।

import React from 'react' import {UserContext,CategoryContext} from '../App' function ChildC() { return ( Child Component at level 3 { user => { return( { category=>{ return Context value is {user} and Category value is {category} } } ) } } ) } export default ChildC

अब, यह नीचे के रूप में आउटपुट प्रदर्शित करेगा।

कोणीय क्ली घटक उत्पन्न करता है

यह छवि का शीर्षक है

जैसा कि ऊपर के उदाहरण में, हमने देखा है कि संदर्भ का उपभोग कैसे किया जाता है, हमें बहु-स्तरीय घोंसले के लिए दृष्टिकोण की आवश्यकता होती है, लेकिन इसे और अधिक पठनीय बनाने के लिए इसे पढ़ना और समझना बहुत मुश्किल है, यहां, हम उपयोग का उपयोग करेंगे। ) हुक।

आइए अधिक पठनीय और समझने योग्य प्रारूप में संदर्भ मान का उपयोग करने के लिए useContext() का एक डेमो देखें,

संदर्भ बनाने और मूल्य पारित करने की प्रक्रिया वही रहती है; मूल्यों का उपभोग करते समय हमें केवल परिवर्तन करने की आवश्यकता है।

संदर्भ मूल्य का उपभोग करने के लिए ChildB.js में कोड अपडेट करें।

import React,{useContext} from 'react' import ChildC from './ChildC' import {UserContext,CategoryContext} from '../App' function ChildB() { const user = useContext(UserContext) const category = useContext(CategoryContext) return ( Child Component at level 2 User is {user}, Category is {category} ) } export default ChildB

जैसा कि हम उपरोक्त कोड में देख सकते हैं, हमें केवल useContext और उपयोगकर्ता को असाइन करने के बाद आयात करने की आवश्यकता है।

कॉन्टेक्स्ट और कैटेगरी कॉन्टेक्स्ट वैल्यू को कॉन्स्टेंट वेरिएबल्स में जोड़ें और जैसा कि ऊपर देखा गया है, हम इसका उपयोग कर सकते हैं।

आउटपुट नीचे के रूप में इटैलिक में प्रदर्शित होता है।

यह छवि का शीर्षक है

useContext() हुक का उपयोग करने से कोड अधिक पठनीय और उपयोग में आसान हो जाता है।

4. यूजस्टेट () हुक

आइए उस डेमो को देखें जिसमें हम टेक्स्टबॉक्स में उपलब्ध मान को जोड़, गुणा, घटाव और रीसेट देखेंगे।

एक घटक बनाएं MathHooks.js

import React, { useState } from 'react' function MathHooks() { const initialVar = 1; const [Var, setVar] = useState(initialVar) return (

Value: {Var}

setVar(Var + 2)}>Addition setVar(Var - 2)}>Subtraction setVar(Var * 2)}>Multiple setVar(initialVar)}>Reset ) } export default MathHooks

और App.js . में आयात करें

import React from 'react'; import './App.css'; import MathHooks from './components/MathHooks' function App() { return ( ); } export default App;

यह नीचे के रूप में आउटपुट प्रदर्शित करेगा।

यह छवि का शीर्षक है

अब Addition बटन पर क्लिक करें। यह 2 से मूल्य जोड़ देगा, यहाँ मैंने इसे 3 बार क्लिक किया है।

यह छवि का शीर्षक है

अब, घटाना पर क्लिक करें जिससे मान 2 कम हो जाएगा।

यह छवि का शीर्षक है

इसी तरह से Multiply बटन पर क्लिक करें जो 2 से गुणा हो जाएगा।

यह छवि का शीर्षक है

अब, रीसेट बटन पर क्लिक करें। यह मूल्य को फिर से शुरू करेगा।

यह छवि का शीर्षक है

जोड़ने के लिए हुक बनाने के लिए पिछले और इस आलेख में उपयोग किया गया दृष्टिकोण असुरक्षित है; कारण और कारण नीचे प्रदर्शित किया गया है।

एक और बटन जोड़ें जिसमें 5 से एक जोड़ शामिल होगा।

import React, { useState } from 'react' function MathHooks() { const initialVar = 1; const [Var, setVar] = useState(initialVar) const AdditionBy5 = () => { for (let i = 0; i <5; i++) { setVar(Var + 1) } } return (

Value: {Var}

setVar(Var + 2)}>Addition Addition by 5 setVar(Var - 2)}>Subtraction setVar(Var * 2)}>Multiply setVar(initialVar)}>Reset ) } export default MathHooks

अब डेमो देखें।

यह छवि का शीर्षक है

5 से जोड़ पर क्लिक करें।

यह छवि का शीर्षक है

यह अभी भी Var मान को 1 से बढ़ा रहा है ऐसा इसलिए है क्योंकि setVar विधि नए मान के बजाय Var का पुराना मान ले रही है।

इस समस्या को हल करने के लिए, हमें useState() के दूसरे रूप को लागू करने की आवश्यकता है जिसमें वेरिएबल के प्रत्यक्ष मान को पारित करने के बजाय, हम एक एरो फ़ंक्शन पास करेंगे, जिसमें पुराने मान तक पहुंच है, और यह पुराना मान लेगा और पुराना मान बढ़ाएगा 1 से और चर के लिए नया मान असाइन करें।

import React, { useState } from 'react' function MathHooks() { const initialVar = 1; const [Var, setVar] = useState(initialVar) const AdditionBy5 = () => { for (let i = 0; i prevVar + 1) } } return (

Value: {Var}

setVar(Var + 2)}>Addition Addition by 5 setVar(Var - 2)}>Subtraction setVar(Var * 2)}>Multiply setVar(initialVar)}>Reset ) } export default MathHooks

आउटपुट नीचे के रूप में प्रदर्शित किया जाएगा।

यह छवि का शीर्षक है

यह छवि का शीर्षक है

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

import React, { useState } from 'react' function MathHooks() { const initialVar = 1; const [Var, setVar] = useState(initialVar) const AdditionBy5 = () => { for (let i = 0; i prevVar + 1) } } return (

Value: {Var}

setVar(prevVar => prevVar + 2)}>Addition setVar(prevVar => prevVar - 2)}>Subtraction setVar(prevVar => prevVar * 2)}>Multiply setVar(initialVar)}>Reset ) } export default MathHooks

आउटपुट ऊपर जैसा ही रहेगा।

aol मेल में लॉग इन नहीं कर सकते

यह छवि का शीर्षक है

यह छवि का शीर्षक है

यह छवि का शीर्षक है

इसी तरह, इसे वर्ग घटक में लागू किया जाना चाहिए।

MathClass.js के लिए पिछले लेख में कोड अपडेट करें।

import React, { Component } from 'react' class MathClass extends Component { constructor(props) { super(props) this.state = { addition: 0 } this.incrementValue = this.incrementValue.bind(this) } incrementValue = () => { this.setState(prevState => { return { addition: prevState.addition + 1 } }) } render() { return ( Added Value is {this.state.addition}

Add 1 Value ) } } export default MathClass

आउटपुट वही रहेगा।

यह छवि का शीर्षक है

यह छवि का शीर्षक है

अब, useState() के दूसरे उदाहरण पर चलते हैं।

useState () वस्तुओं के साथ

अब, इस मामले में, useState() फ़ंक्शन में एक स्ट्रिंग या संख्या को पास करने के बजाय, ऑब्जेक्ट पास किए जाएंगे। ये ऑब्जेक्ट आपकी आवश्यकता के आधार पर String, Numbers, Boolean, Object, Event या Array जैसी कुछ भी हो सकते हैं।

आइए उपसर्ग के साथ पूरा नाम बनाने के लिए डेमो देखें,

एक घटक बनाएँ ObjectHooks.js

import React, { useState } from 'react' function ObjectHooks() { const [name, setName] = useState({ prefix: '', firstName: '', lastName: '' }) return ( setName({ prefix: e.target.value })} /> setName({ firstName: e.target.value })} /> setName({ lastName: e.target.value })} />

Your full name is {name.prefix} {name.firstName} {name.lastName}

) } export default ObjectHooks

App.js . में आयात करें

import React from 'react'; import './App.css'; import ObjectHooks from './components/ObjectHooks' function App() { return ( ); } export default App;

यह नीचे के रूप में आउटपुट प्रदर्शित करेगा।

यह छवि का शीर्षक है

यह छवि का शीर्षक है

आप देखेंगे कि आउटपुट अजीब है क्योंकि पहले टेक्स्टबॉक्स में टाइप करते समय यह मान प्रदर्शित कर रहा है, और जैसे ही यह nthe ext टेक्स्टबॉक्स में स्विच करता है, यह पिछले वाले के मान को साफ़ करता है, और केवल वर्तमान लेता है, क्योंकि उपयोगस्टेट विलय नहीं करेगा राज्य, सेटस्टेट इन-क्लास घटक के विपरीत।

इसलिए, कार्यात्मक घटक में ऐसा करने के लिए, हमें इसे स्प्रेड ऑपरेटर का उपयोग करके मैन्युअल रूप से करने की आवश्यकता है जैसा कि नीचे दिए गए कोड में दिखाया गया है,

import React, { useState } from 'react' function ObjectHooks() { const [name, setName] = useState({ prefix: '', firstName: '', lastName: '' }) return ( setName({ ...name, prefix: e.target.value })} /> setName({ ...name, firstName: e.target.value })} /> setName({ ...name, lastName: e.target.value })} />

Your full name is {name.prefix} {name.firstName} {name.lastName}

) } export default ObjectHooks

यह स्प्रेड ऑपरेटर उस विधि को निर्देशित करता है जो संपूर्ण वस्तु की प्रतिकृति बनाता है और केवल अनुवर्ती संपत्ति को अद्यतन करता है,

अब नीचे दिए गए आउटपुट की जांच करें, नाम के लिए उपसर्ग टाइप करें,

यह छवि का शीर्षक है

अपना पहला नाम जोड़ें,

यह छवि का शीर्षक है

उपनाम जोड़ना,

यह छवि का शीर्षक है

अब राज्य मूल्य बनाए रखा जाता है और खोया नहीं जाता है।

ऐरे के साथ स्टेट का उपयोग करें

इस परिदृश्य में, हम सीखेंगे कि Array का उपयोग करते समय useState का उपयोग कैसे करें,

आइए डेमो देखें,

import React, { useState } from 'react' function ArrayHooks() { const [lists, setLists] = useState([]) const addList = () => { setLists([...lists, { id: lists.length, value: Math.floor(Math.random() * 5) + 1 }]) } return ( Add List Item
    { lists.map(list => (
  • {list.value}
  • )) }
) } export default ArrayHooks

App.js . में फ़ाइल आयात करें

import React from 'react'; import './App.css'; import ArrayHooks from './components/ArrayHooks' function App() { return ( ); } export default App;

यह नीचे के रूप में आउटपुट प्रदर्शित करेगा,

यह छवि का शीर्षक है

अब बटन पर क्लिक करें,

यह छवि का शीर्षक है

k गुना क्रॉस सत्यापन कठिन

यह सूची में आइटम जोड़ देगा और संख्याएं बेतरतीब ढंग से उत्पन्न होती हैं।

पढ़ने के लिए धन्यवाद!

अगर आपको यह लेख अच्छा लगा हो, तो कृपया इसे दूसरों के साथ साझा करें, जो इसे भी पसंद कर सकते हैं।!

#react-js #javascript #react-hook #tutorial