React
प्रतिक्रिया में राज्य

मूल अवस्था

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

नीचे दिए गए उदाहरण में हम अपने घटक के constructor कार्य में कुछ प्रारंभिक स्थिति को परिभाषित कर रहे हैं और render फ़ंक्शन में इसका उपयोग करते हैं।

class ExampleComponent extends React.Component {
  constructor(props){
    super(props);

    // Set-up our initial state
    this.state = {
      greeting: 'Hiya Buddy!'
    };
  }

  render() {
    // We can access the greeting property through this.state
    return(
      <div>{this.state.greeting}</div>
    );
  }
}

setState ()

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

पैरामीटर

1. updater : यह कई महत्वपूर्ण-मूल्य वाले जोड़े के साथ एक वस्तु हो सकती है जिसे राज्य में विलय किया जाना चाहिए या ऐसा फ़ंक्शन जो इस तरह की वस्तु को लौटाता है।
2. callback (optional) : एक फ़ंक्शन जिसे setState() बाद सफलतापूर्वक निष्पादित किया जाएगा। इस तथ्य के कारण कि setState() को कॉल करने की प्रतिक्रिया रिएक्ट द्वारा परमाणु होने की गारंटी नहीं है, यह कभी-कभी उपयोगी हो सकता है यदि आप सकारात्मक होने के बाद कुछ कार्रवाई करना चाहते हैं तो setState() सफलतापूर्वक निष्पादित किया गया है।

उपयोग:

setState विधि एक updater तर्क को स्वीकार करती है जो या तो कई कुंजी-मूल्य-जोड़े के साथ एक वस्तु हो सकती है जिसे राज्य में विलय किया जाना चाहिए, या एक फ़ंक्शन जो इस तरह के ऑब्जेक्ट को prevState और props से गणना करके prevState ।

का उपयोग करते हुए setState() के रूप में एक वस्तु के साथ updater

//
// An example ES6 style component, updating the state on a simple button click.
// Also demonstrates where the state can be set directly and where setState should be used.
//
class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
        this.state = {
            greeting: 'Hello!'
        };
    }
    click(e) {
        this.setState({
              greeting: 'Hello World!'
        });
    }
    render() {
        return(
            <div>
                <p>{this.state.greeting}</p>
                <button onClick={this.click}>Click me</button>
            </div>
        );
    }
    
}

updater रूप में एक फंक्शन के साथ setState() का उपयोग करना

//
// This is most often used when you want to check or make use 
// of previous state before updating any values.
//

this.setState(function(previousState, currentProps) {
  return {
    counter: previousState.counter + 1
  };
});

यह ऑब्जेक्ट तर्क का उपयोग करने की तुलना में अधिक सुरक्षित हो सकता है जहां कई कॉल setState() का उपयोग किया जाता है, क्योंकि कई कॉलों को रिएक्ट द्वारा एक साथ बैच किया जा सकता है और एक ही बार में निष्पादित किया जा सकता है, और राज्य सेट करने के लिए वर्तमान सहारा का उपयोग करते समय पसंदीदा तरीका है।

this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });

ये कॉल Object.assign() का उपयोग करके React द्वारा एक साथ बैच की जा सकती हैं, जिसके परिणामस्वरूप काउंटर को 3 के बजाय 1 द्वारा Object.assign() जा रहा है।

कार्यात्मक दृष्टिकोण का उपयोग घटकों के बाहर राज्य सेटिंग तर्क को स्थानांतरित करने के लिए भी किया जा सकता है। यह राज्य तर्क के अलगाव और पुन: उपयोग के लिए अनुमति देता है।

// Outside of component class, potentially in another file/module

function incrementCounter(previousState, currentProps) {
    return {
        counter: previousState.counter + 1
    };
}

// Within component

this.setState(incrementCounter);

एक वस्तु और एक कॉलबैक समारोह के साथ setState() कॉलिंग

//
// 'Hi There' will be logged to the console after setState completes
//

this.setState({ name: 'John Doe' }, console.log('Hi there'));

आम एंटीपैटर्न

आपको props को state में नहीं सहेजना चाहिए। इसे एक विरोधी पैटर्न माना जाता है। उदाहरण के लिए:

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            url: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            url: this.props.url + '/days=?' + e.target.value
        });
    }

    componentWillMount() {
        this.setState({url: this.props.url});
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.state.url}
            </div>
        )
    }
}

प्रोप url को state पर सहेजा जाता state और फिर संशोधित किया जाता है। इसके बजाय, एक राज्य में परिवर्तनों को बचाने के लिए चुनें, और फिर state और props दोनों का उपयोग करके पूर्ण पथ का निर्माण करें:

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            days: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            days: e.target.value
        });
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.props.url + '/days?=' + this.state.days}
            </div>
        )
    }
}

ऐसा इसलिए है क्योंकि एक रिएक्ट एप्लिकेशन में हम सत्य का एक ही स्रोत चाहते हैं - यानी सभी डेटा एक एकल घटक की जिम्मेदारी है, और केवल एक घटक है। इस घटक की जिम्मेदारी है कि वह अपने राज्य के भीतर डेटा को स्टोर करे, और डेटा को प्रॉम्प्स के माध्यम से अन्य घटकों में वितरित करे।

पहले उदाहरण में, MyComponent class और उसके माता-पिता दोनों अपने राज्य के भीतर 'url' बनाए हुए हैं। यदि हम MyComponent में state.url को अपडेट करते हैं, तो ये परिवर्तन माता-पिता में प्रतिबिंबित नहीं होते हैं। हमने अपने सत्य के एकल स्रोत को खो दिया है, और हमारे आवेदन के माध्यम से डेटा के प्रवाह को ट्रैक करना तेजी से कठिन हो जाता है। दूसरे उदाहरण के साथ इसका विरोध करें - url केवल मूल घटक की स्थिति में बनाए रखा जाता है, और MyComponent में एक प्रोप के रूप में उपयोग किया जाता है - इसलिए हम सच्चाई के एक स्रोत को बनाए रखते हैं।

राज्य, आयोजन और प्रबंधित नियंत्रण

यहां "प्रबंधित" इनपुट फ़ील्ड के साथ रिएक्ट घटक का एक उदाहरण है। जब भी इनपुट फ़ील्ड का मूल्य बदलता है, तो एक ईवेंट हैंडलर कहा जाता है जो इनपुट फ़ील्ड के नए मूल्य के साथ घटक की स्थिति को अपडेट करता है। करने के लिए कॉल setState ईवेंट हैंडलर में के लिए एक कॉल ट्रिगर किया जाएगा render डोम में घटक को अद्यतन करने।

import React from 'react';
import {render} from 'react-dom';


class ManagedControlDemo extends React.Component {

  constructor(props){
    super(props);
    this.state = {message: ""};
  }

  handleChange(e){
    this.setState({message: e.target.value});
  }

  render() {
    return (
      <div>
        <legend>Type something here</legend>
          <input 
            onChange={this.handleChange.bind(this)} 
            value={this.state.message} 
            autoFocus />
        <h1>{this.state.message}</h1>
      </div>
   );
  } 
}


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

रनटाइम व्यवहार को नोट करना बहुत महत्वपूर्ण है। हर बार एक उपयोगकर्ता इनपुट क्षेत्र में मूल्य बदलता है

• handleChange और कहा जाएगा
• setState को setState जाएगा
• render कहा जाएगा

पॉप क्विज़, इनपुट फ़ील्ड में एक कैरेक्टर टाइप करने के बाद, जो DOM एलिमेंट्स बदल जाता है

1. इन सभी - शीर्ष स्तर div, किंवदंती, इनपुट, h1
2. केवल इनपुट और एच 1
3. कुछ भी तो नहीं
4. एक डोम क्या है?

इसका जवाब खोजने के लिए आप यहां और भी प्रयोग कर सकते हैं