javascript - प्रतिक्रिया में अवस्था और प्रॉप्स के बीच क्या अंतर है?




reactjs (20)

मैं रिएक्ट पर एक प्लुरलसाइट कोर्स देख रहा था और प्रशिक्षक ने कहा कि प्रॉपर को नहीं बदलना चाहिए। मैं अब प्रॉप्स बनाम राज्य पर एक लेख (uberVU / react-guide) पढ़ रहा हूं और यह कहता है

प्रॉप्स और राज्य परिवर्तन दोनों एक रेंडर अपडेट को ट्रिगर करते हैं।

बाद में लेख में कहा गया है:

प्रॉप्स (संपत्तियों के लिए कम) एक कंपोनेंट का कॉन्फ़िगरेशन है, इसके विकल्प यदि आप कर सकते हैं। वे ऊपर और अपरिवर्तनीय से प्राप्त होते हैं।

  • तो प्रॉप्स बदल सकते हैं लेकिन उन्हें अपरिवर्तनीय होना चाहिए?
  • आपको प्रॉप्स का उपयोग कब करना चाहिए और आपको राज्य का उपयोग कब करना चाहिए?
  • यदि आपके पास कोई डेटा है जो एक रिएक्ट घटक की आवश्यकता है, तो क्या इसे getInitialState घटक में प्रॉप्स या सेटअप के माध्यम से getInitialState माध्यम से पारित किया जाना चाहिए?

आप इसे प्लेन जेएस कार्यों से संबंधित करके सबसे अच्छा समझ सकते हैं।

सीधे शब्दों में कहें,

राज्य घटक की स्थानीय स्थिति है जिसे घटक के बाहर पहुँचा और संशोधित नहीं किया जा सकता है। यह एक समारोह में स्थानीय चर के बराबर है।

सादा जेएस समारोह

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No

अभिक्रिया घटक

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

दूसरी ओर प्रॉप्स , घटकों को उनके मूल घटक से प्रॉप्स के रूप में डेटा प्राप्त करने की क्षमता देकर पुन: प्रयोज्य बनाते हैं। वे फ़ंक्शन मापदंडों के बराबर हैं।

सादा जेएस समारोह

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

अभिक्रिया घटक

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}
DummyFunction('Manoj');
DummyFunction('Ajay');

साभार: मनोज सिंह नेगी

लेख लिंक: प्रतिक्रिया स्थिति बनाम प्रॉप्स की व्याख्या


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

तो बस राज्य आपके वर्तमान घटक तक ही सीमित है, लेकिन आप जिस भी घटक को चाहते हैं, उसके लिए प्रोप्स को पास किया जा सकता है ... आप वर्तमान घटक की स्थिति को अन्य घटकों के रूप में पारित कर सकते हैं ...

इसके अलावा रिएक्ट में, हमारे पास स्टेटलेस घटक होते हैं जिनमें केवल प्रॉप्स होते हैं न कि आंतरिक स्थिति ...

नीचे दिए गए उदाहरण दिखाते हैं कि वे आपके ऐप में कैसे काम करते हैं:

मूल (राज्य-पूर्ण घटक):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

बच्चे (राज्य-कम घटक):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

राज्य एक घटक के भीतर रहता है जहां माता-पिता से बच्चे तक सहारा के रूप में पारित किया जाता है। प्रॉप्स आमतौर पर अपरिवर्तनीय होते हैं।

   this.setState({name: 'Lila'})

उपरोक्त कोड में, हमारे पास एक पैरेंट क्लास (पैरेंट) है, जिसका नाम उसके राज्य के रूप में है जो कि एक प्रस्ताव के रूप में चाइल्ड कंपोनेंट (चाइल्ड क्लास) को पास किया जाता है और चाइल्ड कंपोनेंट इसे {this.props.name} का उपयोग करके रेंडर करता है


से: एंड्रिया चियारेली पुस्तक "शुरुआती प्रतिक्रिया: अपने सामने वाले विकास कार्यप्रवाह को सरल बनाएं और प्रतिक्रिया के साथ अपने अनुप्रयोगों के उपयोगकर्ता अनुभव को बढ़ाएं":

हर रिएक्ट कंपोनेंट में प्रॉपर प्रॉपर्टी होती है। इस संपत्ति का उद्देश्य घटक को दिए गए डेटा इनपुट को इकट्ठा करना है। JSX विशेषता एक प्रतिक्रिया तत्व से जुड़ी होती है, समान नाम वाली संपत्ति प्रॉपर ऑब्जेक्ट से जुड़ी होती है। तो, हम संलग्न संपत्ति का उपयोग करके पारित डेटा तक पहुंच सकते हैं। इसके अलावा, के अचल रंगमंच की सामग्री हमें सोचने के लिए अनुमति देता है घटकों के रूप में शुद्ध कार्यों , जो कार्यों कोई साइड इफेक्ट (क्योंकि वे अपने इनपुट डेटा में परिवर्तन नहीं करते) होती है। हम डेटा को एक घटक से दूसरे में एक यूनिडायरेक्शनल डेटा फ्लो के रूप में देख सकते हैं, मूल घटक से बाल घटकों की ओर। यह हमें अधिक नियंत्रणीय प्रणाली देता है।

जब डेटा में परिवर्तन होता है तो रिएक्ट एक घटक के स्वचालित प्रतिपादन का समर्थन करने के लिए एक तंत्र प्रदान करता है। ऐसा तंत्र राज्य की अवधारणा पर आधारित है । प्रतिक्रिया स्थिति एक संपत्ति है जो समय के साथ बदलने वाले डेटा का प्रतिनिधित्व करती है। प्रत्येक घटक राज्य संपत्ति का समर्थन करता है , लेकिन इसका उपयोग सावधानी से किया जाना चाहिए। वे घटक जो समय के साथ बदल सकने वाले डेटा को स्टोर करते हैं उन्हें स्टेटफुल कंपोनेंट कहा जाता है । एक स्टेटफुल कंपोनेंट , स्टेट को इस.स्टेट प्रॉपर्टी में स्टोर करता है। एक घटक को सूचित करने के लिए कि राज्य बदल गया है, आपको setState () विधि का उपयोग करना होगा । राज्य आरंभीकरण एकमात्र ऐसा मामला है जहां आप setState () का उपयोग किए बिना इस .state गुण का मान असाइन कर सकते हैं ।

setState () पुराने डेटा पहले से ही राज्य में निहित के साथ नए डेटा विलीन हो जाती है, और अधिलेखित कर देता है पहले वाली स्थिति setState () के निष्पादन से चलाता प्रस्तुत करना () विधि है, तो आप फोन कभी नहीं करना चाहिए प्रस्तुत करना () स्पष्ट रूप से


गुण के लिए सहारा सरल हैं। Props कैसे घटक एक दूसरे से बात करते हैं। यदि आप सभी रिएक्ट से परिचित हैं, तो आपको पता होना चाहिए कि मूल घटक से प्रॉप्स नीचे की ओर बहते हैं।

ऐसी स्थिति भी है कि आप डिफ़ॉल्ट प्रॉप्स रख सकते हैं ताकि प्रॉपर सेट हो जाएं, भले ही कोई मूल घटक प्रॉपर डाउन न हो।

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

इसलिए हम खुश हैं। घटक माता-पिता से डेटा प्राप्त करते हैं। सभी हल, सही?

खैर, काफी नहीं। क्या होता है जब एक घटक माता-पिता के अलावा किसी और से डेटा प्राप्त करता है? क्या होगा यदि उपयोगकर्ता डेटा को सीधे घटक को इनपुट करता है?

खैर, यही कारण है कि हमारे पास राज्य है।

राज्य

प्रॉप्स को बदलना नहीं चाहिए, इसलिए राज्य कदम बढ़ाएं। आम तौर पर घटकों की स्थिति नहीं होती है और इसलिए उन्हें स्टेटलेस कहा जाता है। राज्य का उपयोग करने वाला एक घटक स्टेटफुल के रूप में जाना जाता है। पार्टियों में उस छोटे tidbit को छोड़ने के लिए स्वतंत्र महसूस करें और लोगों को आपसे दूर देखें।

इसलिए राज्य का उपयोग किया जाता है ताकि एक घटक किसी भी रेंडर के बीच जानकारी का ट्रैक रख सके जो वह करता है। जब आप इसे सेट करते हैं तो यह स्टेट ऑब्जेक्ट को अपडेट करता है और फिर कंपोनेंट को री-रेंडर करता है। यह सुपर कूल है क्योंकि इसका मतलब है कि रिएक्ट कड़ी मेहनत का ख्याल रखता है और धधकते हुए तेजी से होता है।

राज्य के एक छोटे से उदाहरण के रूप में, यहां सर्च बार से एक स्निपेट दिया गया है (यदि आप रिएक्ट के बारे में अधिक जानना चाहते हैं तो इस कोर्स को देखें)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

सारांश

प्रॉप्स और स्टेट इसी तरह की चीजें करते हैं लेकिन अलग-अलग तरीकों से उपयोग की जाती हैं। आपके अधिकांश घटक संभवतः स्टेटलेस होंगे।

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

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


प्रतिक्रिया अवयव READ / WRITE के लिए राज्य का उपयोग आंतरिक चर जो उदाहरण के लिए परिवर्तित / उत्परिवर्तित किया जा सकता है:

this.setState({name: 'Lila'})

रिएक्ट प्रॉप्स एक विशेष ऑब्जेक्ट है जो प्रोग्रामर को पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में वेरिएबल और मेथड प्राप्त करने की अनुमति देता है।

यह एक विंडोज और घर के दरवाजे जैसा कुछ है। प्रॉप्स भी अपरिवर्तनीय हैं चाइल्ड कंपोनेंट उन्हें बदल / अपडेट नहीं कर सकते हैं।

ऐसे कुछ तरीके हैं जो पेरेंट कंपोनेंट द्वारा प्रॉप्स बदलने पर सुनने में मदद करते हैं।


प्रतिक्रिया में "राज्य" और "सहारा" के बीच कुछ अंतर।

प्रतिक्रिया को नियंत्रित करता है और DOM को राज्य पर आधारित करता है। घटक राज्य दो प्रकार के होते हैं: प्रॉप्स वह स्थिति है जो घटकों के बीच स्थानांतरण होती है, और राज्य घटकों की आंतरिक स्थिति होती है। Props का उपयोग मूल घटक से बाल घटक में डेटा स्थानांतरण के लिए किया जाता है। घटकों की अपनी स्थिति भी अंदर होती है: वह अवस्था जिसे केवल घटक के अंदर ही संशोधित किया जा सकता है।

आम तौर पर कुछ घटक की स्थिति बाल घटक की प्रॉप्स हो सकती है, प्रॉप्स को उन बच्चों को पास किया जाएगा जो मूल घटक की रेंडरिंग विधि के अंदर बताए गए हैं


प्रतिक्रिया में राज्यों डेटा के साथ ही सहारा की दुकान। उत्तरार्द्ध के साथ इसका अंतर यह है कि संग्रहीत डेटा को विभिन्न परिवर्तनों द्वारा संशोधित किया जा सकता है। ये फ्लैट जावास्क्रिप्ट में लिखी गई वस्तुओं से ज्यादा कुछ नहीं हैं, इसलिए वे उस डेटा या कोड को शामिल कर सकते हैं, जिसे आप मॉडल करना चाहते हैं। यदि आपको अधिक विवरणों की आवश्यकता है, तो यह अनुशंसा की जाती है कि आप इन प्रकाशनों का उपयोग करें और प्रतिक्रिया में अवस्था का उपयोग करें


प्रॉप्स अपरिवर्तनीय होने के बारे में प्रारंभिक प्रश्न के उत्तर में, उन्हें अपरिवर्तनीय कहा जाता है जहां तक ​​बाल घटक का संबंध है लेकिन माता-पिता में परिवर्तनशील हैं।


प्रॉप्स और राज्य के बीच महत्वपूर्ण अंतर यह है कि राज्य आंतरिक और घटक द्वारा स्वयं नियंत्रित होता है जबकि प्रॉम्प्स बाहरी होते हैं और जो कुछ भी घटक को नियंत्रित करता है।

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello />,document.getElementById(“root”));

class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

  • राज्य बदला जा सकता है (म्यूटेबल)
  • जबकि प्रॉप्स (अपरिवर्तनीय) नहीं हो सकते

प्रॉप्स: प्रॉप्स कुछ और नहीं बल्कि कंपोनेंट और रिएक्ट कंपोनेंट की प्रॉपर्टी कुछ नहीं बल्कि एक जावास्क्रिप्ट फंक्शन है।

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

const तत्व =;

यहाँ <Welcome name="Sara" /> एक वस्तु को पास करना {नाम: 'सारा'} स्वागत घटक के रूप में। एक मूल घटक से बाल घटक तक डेटा पास करने के लिए हम प्रॉपर का उपयोग करते हैं। प्रॉप्स अपरिवर्तनीय है। एक घटक के जीवन चक्र के दौरान प्रॉप्स को बदलना नहीं चाहिए (उन्हें अपरिवर्तनीय मानें)।

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

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

माता-पिता-बाल संचार के लिए, बस सहारा पास करें।

अपने कंट्रोलर-व्यू में आपके वर्तमान पृष्ठ की ज़रूरत के डेटा को संग्रहीत करने के लिए राज्य का उपयोग करें।

अपने बाल घटकों को डेटा और ईवेंट हैंडलर पास करने के लिए प्रॉप्स का उपयोग करें।

इन सूचियों को आपके घटकों में डेटा के साथ काम करते समय आपको मार्गदर्शन करने में मदद करनी चाहिए।

रंगमंच की सामग्री

  • अपरिवर्तनीय हैं
    • जो प्रतिक्रिया को तेज़ संदर्भ जाँच करने देता है
  • आपके व्यू-कंट्रोलर से डेटा पास करने के लिए उपयोग किया जाता है
    • आपका शीर्ष स्तर घटक
  • बेहतर प्रदर्शन किया है
    • बाल घटकों को डेटा पास करने के लिए इसका उपयोग करें

राज्य

  • आपके दृश्य-नियंत्रक में प्रबंधित किया जाना चाहिए
    • आपका शीर्ष स्तर घटक
  • पारस्परिक है
  • खराब प्रदर्शन है
  • बाल घटकों से पहुँचा नहीं जाना चाहिए
    • इसके बजाय सहारा के साथ इसे नीचे पारित करें

दो घटकों के बीच संचार के लिए जिनके माता-पिता-बच्चे के संबंध नहीं हैं, आप अपनी खुद की वैश्विक घटना प्रणाली स्थापित कर सकते हैं। जब आप कोई ईवेंट प्राप्त करते हैं, तो कंपोनेंटमाउंट (), और घटकविलीयूएनमाउंट (), और कॉल सेटस्टेट () में सदस्यता समाप्त करें। फ्लक्स पैटर्न इसे व्यवस्थित करने के संभावित तरीकों में से एक है। - https://facebook.github.io/react/tips/communicate-between-components.html

राज्य में क्या घटक होने चाहिए?

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

संभव के रूप में अपने कई घटकों को स्टेटलेस रखने की कोशिश करें। ऐसा करने से आप राज्य को उसके सबसे तार्किक स्थान पर अलग कर देंगे और अतिरेक को कम कर देंगे, जिससे आपके आवेदन के बारे में तर्क करना आसान हो जाएगा।

एक सामान्य पैटर्न कई स्टेटलेस घटकों का निर्माण करना है जो सिर्फ डेटा को प्रस्तुत करते हैं, और पदानुक्रम में उनके ऊपर एक स्टेटफुल घटक होता है जो प्रॉप्स के माध्यम से अपने बच्चों को अपना राज्य देता है। स्टेटफुल कंपोनेंट इंटरैक्ट लॉजिक के सभी को इनकैप्सुलेट करता है, जबकि स्टेटलेस कंपोनेंट्स डिक्लेक्टिव तरीके से डेटा रेंडर करने का ध्यान रखते हैं। - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

राज्य में क्या जाना चाहिए?

राज्य में वह डेटा होना चाहिए जो एक यूआई अपडेट को ट्रिगर करने के लिए एक घटक के ईवेंट हैंडलर बदल सकता है। वास्तविक एप्लिकेशन में यह डेटा बहुत छोटा और JSON-serializable हो जाता है। स्टेटफुल कंपोनेंट का निर्माण करते समय, अपने राज्य के न्यूनतम संभव प्रतिनिधित्व के बारे में सोचें, और केवल उन संपत्तियों को इसमें जमा करें। रेंडर के अंदर () बस इस राज्य पर आधारित किसी अन्य जानकारी की गणना करें। आप पाएंगे कि इस तरह से अनुप्रयोगों के बारे में सोचने और लिखने से सबसे सही अनुप्रयोग होता है, क्योंकि निरर्थक या गणना मूल्यों को राज्य में जोड़ने का मतलब है कि आपको उनके लिए प्रतिक्रिया व्यक्त करने के बजाय उन पर निर्भर रहने की बजाय स्पष्ट रूप से सिंक में रखने की आवश्यकता है। - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state


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

उदाहरण के लिए, मान लें कि आपके पास कुछ ड्रॉपडाउन नियंत्रण है (जो कस्टम स्टाइल के लिए standart HTML का चयन करता है), जो a) सूची से कुछ मान का चयन कर सकता है, और b) खोला या बंद किया जा सकता है (यानी, विकल्प सूची प्रदर्शित या छिपी हुई है)। अब, मान लें कि आपका ऐप कुछ प्रकार की वस्तुओं की सूची प्रदर्शित करता है और आपका ड्रॉपडाउन सूची प्रविष्टियों के लिए फ़िल्टर को नियंत्रित करता है। फिर, एक प्रोप के रूप में सक्रिय फिल्टर वैल्यू पास करना सबसे अच्छा होगा, और खुले / बंद राज्य को स्थानीय रखें। इसके अलावा, इसे कार्यात्मक बनाने के लिए, आप मूल घटक से एक ऑनचेंज हैंडलर पास करेंगे, जिसे ड्रॉपडाउन तत्व के अंदर कहा जाएगा और तुरंत स्टोर पर अद्यतन जानकारी (नया चयनित फ़िल्टर) भेजें। दूसरी ओर, खोला / बंद राज्य को ड्रॉपडाउन घटक के अंदर रखा जा सकता है, क्योंकि नियंत्रण खोले जाने पर बाकी आवेदन वास्तव में परवाह नहीं करता है, जब तक कि उपयोगकर्ता वास्तव में इसे बदल नहीं देता है।

निम्नलिखित कोड पूरी तरह से काम नहीं कर रहा है, इसमें सीएसएस और हैंडलिंग ड्रॉपडाउन क्लिक / ब्लर / परिवर्तन घटनाओं की आवश्यकता है, लेकिन मैं उदाहरण को कम से कम रखना चाहता था। आशा है कि यह अंतर को समझने में मदद करता है।

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);

राज्य आपका डेटा है, पारस्परिक रूप से है, आप इसके साथ अपनी आवश्यकता के अनुसार कुछ भी कर सकते हैं, प्रॉप्स को केवल डेटा पढ़ा जाता है, आमतौर पर जब आप प्रॉप्स पास करते हैं तो आप अपने डेटा के साथ पहले से ही काम करते हैं और आपको इसे प्रस्तुत करने के लिए चाइल्ड घटक की आवश्यकता होती है या यदि आपका प्रॉप्स एक है function u इसे किसी कार्य को करने के लिए कहते हैं


राज्य वह तरीका है जो आपके घटक द्वारा रखी गई जानकारी के साथ प्रतिक्रिया करता है।

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

आमतौर पर राज्य को परिभाषित करने का सबसे अच्छा तरीका इस प्रकार है:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

लेकिन आप कर सकते हैं देशी प्रतिक्रिया के अक्षांश कार्यान्वयन में:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

ये दो उदाहरण सटीक तरीके से निष्पादित होते हैं, यह सिर्फ एक सिंटैक्स सुधार है।

तो, क्या हम ऑब्जेक्ट विशेषताओं का उपयोग करने से अलग है, जैसा कि हमारे पास हमेशा ओओ प्रोग्रामिंग में है? आमतौर पर, आपके राज्य में आयोजित जानकारी स्थिर होने का मतलब नहीं है, यह समय के साथ बदल जाएगा और आपके दृष्टिकोण को इन परिवर्तनों को प्रतिबिंबित करने के लिए अपडेट करने की आवश्यकता होगी। राज्य इस कार्यक्षमता को सरल तरीके से पेश करता है।

राज्य में रहने योग्य होना चाहता हूँ! और मैं इस पर पर्याप्त तनाव नहीं बना सकता। इसका क्या मतलब है? इसका मतलब है कि आपको कभी ऐसा नहीं करना चाहिए।

 state.key2 = newValue;

इसे करने का उचित तरीका है:

this.setState({ key2: newValue });

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

अधिक विस्तृत विवरण के लिए प्रतिक्रिया डॉक्स https://facebook.github.io/react/docs/state-and-lifecycle.html : https://facebook.github.io/react/docs/state-and-lifecycle.html


राज्य:

  1. अवस्थाएँ परस्पर परिवर्तनशील हैं।
  2. राज्य अलग-अलग घटकों से जुड़े होते हैं जिनका उपयोग अन्य घटकों द्वारा नहीं किया जा सकता है।
  3. कंपोनेंट माउंट पर राज्यों की शुरुआत होती है।
  4. राज्यों का उपयोग घटक के भीतर गतिशील परिवर्तनों को प्रस्तुत करने के लिए किया जाता है।

रंगमंच की सामग्री:

  1. सहारा अपरिवर्तनीय हैं।
  2. आप घटकों के बीच सहारा पारित कर सकते हैं।
  3. प्रॉप्स ज्यादातर घटकों के बीच संवाद करने के लिए उपयोग किए जाते हैं। आप सीधे माता-पिता से बच्चे के पास जा सकते हैं। बच्चे से माता-पिता को पारित करने के लिए आपको राज्यों को उठाने की अवधारणा का उपयोग करने की आवश्यकता है।

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}


सरल व्याख्या है: उदाहरण रंग = "नीला" या एनीमेशन = सच आदि के लिए STATE घटक की स्थानीय स्थिति है। घटक की स्थिति बदलने के लिए this.setState का उपयोग करें। PROPS यह है कि कैसे घटक एक दूसरे से बात करते हैं (माता-पिता से बच्चे को डेटा भेजें) और घटकों को पुन: प्रयोज्य बनाते हैं।


सामान्य तौर पर, एक घटक (माता-पिता) की स्थिति बच्चे के घटक के लिए होती है।

  1. राज्य एक घटक के भीतर रहता है जहां माता-पिता से बच्चे तक सहारा के रूप में पारित किया जाता है।
  2. प्रॉप्स आमतौर पर अपरिवर्तनीय होते हैं।

    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                name : "John",
            }
        }
        render() {
            return (
                <Child name={this.state.name}>
            )
        }
    }
    
    class Child extends React.Component {
        constructor() {
            super();
        }
    
        render() {
            return(
                {this.props.name} 
            )
        }
    }

उपरोक्त कोड में, हमारे पास एक पैरेंट क्लास (पैरेंट) है, जिसका नाम उसके राज्य के रूप में है, जिसे एक प्रस्ताव के रूप में चाइल्ड कंपोनेंट (चाइल्ड क्लास) को पास किया जाता है और चाइल्ड कंपोनेंट {this.props.name} का उपयोग करके इसे रेंडर करता है।


राज्य - यह एक विशेष परिवर्तनशील संपत्ति है जो एक घटक डेटा रखती है। जब Componet माउंट करता है तो इसका डिफ़ॉल्ट मान होता है।

प्रॉप्स - यह एक विशेष गुण है जो प्रकृति से अपरिवर्तनीय है और माता-पिता से बच्चे तक के मूल्य के पारित होने के मामले में उपयोग किया जाता है। प्रॉप्स कंपोनेंट्स के बीच एक कॉन्यूलेशन चैनल है, जो हमेशा टॉप (पैरेंट) से नितंब (बच्चे) तक जाता है।

नीचे राज्य और प्रॉप्स का मुकाबला करने का पूरा उदाहरण है: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>

राज्य सत्य की उत्पत्ति है, जहां आपका डेटा रहता है। आप कह सकते हैं कि राज्य प्रॉप्स के माध्यम से ही प्रकट होता है।

घटकों को प्रॉप्स प्रदान करना आपके यूआई को आपके डेटा के साथ सिंक में रखता है। एक घटक वास्तव में केवल एक फ़ंक्शन है जो मार्कअप देता है।

समान प्रॉप्स (इसे प्रदर्शित करने के लिए डेटा) को देखते हुए यह हमेशा एक ही मार्कअप का उत्पादन करेगा।

तो प्रॉप पाइपलाइनों की तरह हैं जो डेटा को मूल से कार्यात्मक घटकों तक ले जाते हैं।





reactjs