State in React in Hindi (ReactJS में State क्या है)

State in React in Hindi: State एक built-in React object है जिसका उपयोग घटक (component) के बारे में डेटा या जानकारी रखने के लिए किया जाता है।

एक घटक की स्थिति समय के साथ बदल सकती है; जब भी यह बदलता है, घटक पुन: प्रस्तुत करता है।

React में state सबसे जटिल चीज है, और यह कुछ ऐसा है जिसे शुरुआती और अनुभवी डेवलपर्स दोनों समझने के लिए संघर्ष करते हैं। तो इस लेख में, हम रिएक्ट में state की सभी बुनियादी बातों का पता लगाएंगे।

React State को समझने से पहले, आइए पहले React के कुछ बुनियादी बातों को समझें जैसे कि React JS क्या है, JSX और React Components क्या होता है और React Install करें। ताकि बाद में state के चारों ओर अपना सिर लपेटना आसान हो।

ReactJS में State क्या है (State in React JS in Hindi)

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

वास्तव में, state object वह जगह है जहां आप घटक से संबंधित संपत्ति मूल्यों को संग्रहीत करते हैं। जब state वस्तु बदलती है, तो घटक पुन: प्रस्तुत करता है।

दूसरे शब्दों में, एक घटक की स्थिति एक ऐसी object है जिसमें कुछ जानकारी होती है जो घटक के जीवनकाल में बदल सकती है।

उदाहरण के लिए, आइए हम इस लेख में बनाई गई घड़ी के बारे में सोचें, हम हर सेकंड में स्पष्ट रूप से रेंडर render() विधि को कॉल कर रहे थे, लेकिन React उसी परिणाम को प्राप्त करने का एक बेहतर तरीका प्रदान करता है.

और वह है स्टेट का उपयोग करके, मूल्य को संग्रहीत करना घटक के state के member के रूप में समय।

यहां एक उदाहरण दिया गया है जिसमें दिखाया गया है कि State का उपयोग कैसे किया जाता है:

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "test"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

State की आवश्यकता (Need of React State Management in Hindi)

React एप्लिकेशन घटकों का उपयोग करके बनाए जाते हैं और वे आंतरिक रूप से अपने State का प्रबंधन करते हैं और यह कुछ components वाले अनुप्रयोगों के लिए अच्छी तरह से काम करता है, लेकिन जब एप्लिकेशन बड़ा हो जाता है, तो घटकों में साझा states के प्रबंधन की जटिलता मुश्किल हो जाती है।

यहां ई-कॉमर्स एप्लिकेशन का एक सरल उदाहरण दिया गया है, जिसमें उत्पाद खरीदते समय कई components की स्थिति बदल जाएगी।

• उस उत्पाद को खरीदारी सूची (shopping list) में जोड़ें।
• ग्राहक इतिहास में उत्पाद जोड़ें (Add product)।
• खरीदे गए उत्पादों की ट्रिगर गिनती (trigger count)।

यदि डेवलपर्स के मन में मापनीयता नहीं है तो यह पता लगाना वास्तव में कठिन है कि कुछ गलत होने पर क्या हो रहा है।

यही कारण है कि आपको अपने application में react state management की आवश्यकता है।

Creating the state Object in Hindi

स्टेट ऑब्जेक्ट को कंस्ट्रक्टर में इनिशियलाइज़ किया जाता है:

उदाहरण: कंस्ट्रक्टर विधि में state वस्तु निर्दिष्ट करें –

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

State object में आपकी पसंद के अनुसार कई properties हो सकते हैं:

उदाहरण: उन सभी गुणों को निर्दिष्ट करें जिनकी आपके घटक को आवश्यकता है –

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Using the state Object

this.state.propertyname सिंटैक्स का उपयोग करके घटक में कहीं भी state object का संदर्भ लें:

उदाहरण: render() विधि में स्टेट ऑब्जेक्ट का संदर्भ लें:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Changing the state Object

स्टेट ऑब्जेक्ट में मान बदलने के लिए, this.setState() विधि का उपयोग करें।

जब state object में कोई मान बदलता है, तो घटक फिर से प्रस्तुत करेगा, जिसका अर्थ है कि आउटपुट नए मान (मानों) के अनुसार बदल जाएगा।

उदाहरण: एक onClick event के साथ एक बटन जोड़ें जो color property को बदल देगा:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

नोट: स्टेट ऑब्जेक्ट को बदलने के लिए हमेशा setState() विधि (method) का उपयोग करें, यह सुनिश्चित करेगा कि घटक जानता है कि यह अपडेट किया गया है और render() विधि (और अन्य सभी lifecycle विधियों) को कॉल करता है।

निष्कर्ष

मूल रूप से, React में विशेष बिल्ट-इन ऑब्जेक्ट होता है जिसे स्टेट कहा जाता है, जो घटकों को अपना डेटा बनाने और प्रबंधित करने की अनुमति देता है।

इसलिए Props के विपरीत, घटक state के साथ डेटा पास नहीं कर सकते हैं, लेकिन वे इसे आंतरिक रूप से बना और प्रबंधित कर सकते हैं।

यानी की एक घटक के अंदर आंतरिक संचार के लिए State का उपयोग किया जाता है।

मुझे उम्मीद है कि यह “State in React in Hindi (ReactJS में State क्या है)” लेख, आपको यह समझने में मदद किया है कि React JS में State क्या है, State ऑब्जेक्ट कैसे बनाएं और उपयोग करें आदि।