उपयोग क्या है () रिएक्ट में?

Question

मैं वर्तमान में प्रतिक्रिया में हुक की अवधारणा सीख रहा हूं और उदाहरण के नीचे समझने की कोशिश कर रहा हूं।

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

उपरोक्त उदाहरण हैंडलर फ़ंक्शन पैरामीटर पर काउंटर को बढ़ाता है। क्या होगा अगर मैं इवेंट हैंडलर फ़ंक्शन के अंदर गिनती मान को संशोधित करना चाहता हूं

उदाहरण के नीचे विचार करें

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>

Comments

useStateकार्यान्वित कैसे किया जाता है, यह समझने के लिए आप स्रोत कोड में भी देख सकते हैं । यहाँ संस्करण 16.9 की परिभाषा दी गई है ।

— केमट्युरियन

Answer 1

रिएक्ट हुक एक नया तरीका है (अभी भी विकसित किया जा रहा है) प्रतिक्रिया की मुख्य विशेषताओं का stateउपयोग करने के लिए जैसे कि कक्षाओं का उपयोग किए बिना, अपने उदाहरण में यदि आप सीधे हैंडलर फ़ंक्शन में एक काउंटर को सीधे बढ़ाना चाहते हैं onClick, तो इसे सीधे प्रोप में निर्दिष्ट किए बिना , आप कुछ ऐसा कर सकता है:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

और पर क्लिक करें:

<button onClick={setCount}>
    Click me
</button>

आइए जल्दी से समझाएं कि इस पंक्ति में क्या हो रहा है:

const [count, setCounter] = useState(0);

useState(0)एक टपल लौटाता है जहां पहला पैरामीटर countकाउंटर की वर्तमान स्थिति है और setCounterवह विधि है जो हमें काउंटर की स्थिति को अपडेट करने की अनुमति देगा। हम कहीं भी setCounterस्थिति को अपडेट करने के लिए विधि का उपयोग कर सकते हैं count- इस मामले में हम इसे setCountफ़ंक्शन के अंदर उपयोग कर रहे हैं जहां हम अधिक चीजें कर सकते हैं; हुक के साथ विचार यह है कि हम अपने कोड को अधिक कार्यात्मक रखने में सक्षम हैं और यदि वांछित / आवश्यकता नहीं है तो कक्षा आधारित घटकों से बचें ।

मैं कई उदाहरणों के साथ हुक के बारे में एक पूरा लेख लिखा था जैसे (काउंटर सहित) इस codepen , मैं का इस्तेमाल किया useState, useEffect, useContext, और कस्टम हुक । मैं इस विवरण के बारे में अधिक जानकारी प्राप्त कर सकता हूं कि हुक इस उत्तर पर कैसे काम करते हैं, लेकिन प्रलेखन राज्य हुक की व्याख्या करते हुए बहुत अच्छा काम करता है और अन्य हुक को विस्तार से करता है, आशा है कि यह मदद करता है।

अद्यतन: हुक अब एक प्रस्ताव नहीं है , 16.8 संस्करण के बाद से वे अब उपयोग करने के लिए उपलब्ध हैं, रिएक्ट की साइट में एक अनुभाग है जो कुछ FAQ का जवाब देता है ।

Comments

इसके अलावा अच्छा सादृश्य है कि जावास्क्रिप्ट में तकनीकी रूप से एक टपल डेटा प्रकार नहीं है

— गूंजराइज करें

खैर, destructured काम टपल की तरह प्रयोग किया जाता है stackoverflow.com/a/4513061/6335029

— NaveenDA

क्या हुक हैं एस्क्? उपयोग करते समय setSomething, अगर मैं बाद में somethingसीधे उपयोग करने की कोशिश करता हूं, तो यह अभी भी पुराना मूल्य है ...

— बायरन कोएट्सी

Answer 2

useState0.16.7संस्करण में उपलब्ध बिल्ड-रिएक्शन हुक में से एक है ।

useStateकेवल कार्यात्मक घटकों के अंदर उपयोग किया जाना चाहिए। useStateजिस तरह से हमें आंतरिक स्थिति की आवश्यकता होती है और जीवन चक्र विधियों जैसे अधिक जटिल तर्क को लागू करने की आवश्यकता नहीं होती है।

const [state, setState] = useState(initialState);

एक स्टेटफुल वैल्यू, और इसे अपडेट करने के लिए एक फंक्शन देता है।

प्रारंभिक रेंडर के दौरान, लौटा हुआ राज्य (राज्य) पहले तर्क (initialState) के रूप में पारित मूल्य के समान है।

राज्य को अद्यतन करने के लिए setState फ़ंक्शन का उपयोग किया जाता है। यह एक नए राज्य मूल्य को स्वीकार करता है और घटक के फिर से प्रस्तुतिकरण को लागू करता है।

कृपया ध्यान दें कि useStateराज्य को अपडेट करने के लिए हुक कॉलबैक घटकों की तुलना में अलग तरह से व्यवहार करता हैthis.setState । आपको अंतर दिखाने के लिए मैंने दो उदाहरण तैयार किए।

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

setUserInfoकॉलबैक का उपयोग करने पर नई ऑब्जेक्ट बनाई जाती है। ध्यान दें कि हमने lastNameमहत्वपूर्ण मूल्य खो दिया है । यह तय करने के लिए कि हम फंक्शन पास कर सकते हैं useState।

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

उदाहरण देखें:

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

वर्ग घटकों में पाई जाने वाली सेटस्टेट विधि के विपरीत, उपयोगस्टैट स्वचालित रूप से अद्यतन वस्तुओं को मर्ज नहीं करता है। आप ऑब्जेक्ट स्प्रेड सिंटैक्स के साथ फंक्शन अपडेटर फॉर्म को जोड़कर इस व्यवहार को दोहरा सकते हैं:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

आधिकारिक दस्तावेजuseState देखने के बारे में अधिक जानकारी के लिए ।

Comments

उदाहरण में एक फ़ंक्शन को पैरामीटर के रूप में जोड़ने के लिए धन्यवाद।

— जूनी ब्रोस

Answer 3

useStateहुक का वाक्य विन्यास सीधा है।

const [value, setValue] = useState(defaultValue)

यदि आप इस वाक्य रचना से परिचित नहीं हैं, तो यहां जाएं ।

मैं आपको प्रलेखन पढ़ने की सलाह दूंगा। उत्कृष्ट उदाहरणों के साथ उत्कृष्ट स्पष्टीकरण हैं।

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }

Comments

यह स्वीकृत उत्तर होना चाहिए। अच्छे बाहरी संदर्भों के साथ संक्षिप्त और स्पष्ट।

— वरुण

Answer 4

useStateप्रतिक्रिया v16.8.0 में उपलब्ध हुक में से एक है। यह मूल रूप से आपको अपने अन्यथा गैर-राज्य / कार्यात्मक घटकों को चालू करने देता है जो कि अपना राज्य हो सकता है।

बहुत बुनियादी स्तर पर, यह इस तरह से उपयोग किया जाता है:

const [isLoading, setLoading] = useState(true);

यह तब आपको setLoadingबूलियन मान पास करने की अनुमति देता है । यह "स्टेटफुल" कार्यात्मक घटक होने का एक अच्छा तरीका है।

Answer 5

useState()एक प्रतिक्रिया हुक है। हुक घटकों के अंदर राज्य और उत्परिवर्तन का उपयोग करना संभव बनाते हैं।

जब आप कक्षाओं के अंदर हुक का उपयोग नहीं कर सकते हैं तो आप अपने क्लास घटक को एक फ़ंक्शन के साथ लपेट सकते हैं और इससे हुक का उपयोग कर सकते हैं। यह कक्षा से फ़ंक्शन रूप में घटकों को स्थानांतरित करने के लिए एक महान उपकरण है। यहाँ एक पूर्ण उदाहरण है:

इस उदाहरण के लिए मैं एक काउंटर घटक का उपयोग करूंगा। यह बात है:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

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

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

यह बिल्कुल समान घटक है, समान व्यवहार, समान नाम और समान गुणों के साथ। अब फंक्शन कंपोनेंट के लिए काउंटिंग स्टेट उठाएं। इसी तरह होता है:

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

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

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

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

सादर

Answer 6

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

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

Answer 7

हुक एक नई विशेषता React v16.7.0-alpha useStateहै "हुक"। useState()किसी भी चर का डिफ़ॉल्ट मान सेट करें और फ़ंक्शन घटक (PureComponent फ़ंक्शन) में प्रबंधित करें। ex : const [count, setCount] = useState(0);गिनती 0. का डिफ़ॉल्ट मान सेट और यू उपयोग कर सकते हैं setCountकरने के लिए incrementया decrementमूल्य। onClick={() => setCount(count + 1)}गिनती मूल्य में वृद्धि। डॉक्टर

Answer 8

धन्यवाद loelsonk, मैंने ऐसा किया

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )

Answer 9

useState एक हुक है जो आपको एक कार्यात्मक घटक में स्थिति जोड़ने देता है। यह एक तर्क को स्वीकार करता है जो राज्य संपत्ति का प्रारंभिक मूल्य है और राज्य संपत्ति का वर्तमान मूल्य और एक तरीका है जो उस राज्य संपत्ति को अपडेट करने में सक्षम है।
निम्नलिखित एक सरल उदाहरण है:
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}

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