प्रतिक्रियात्मक मूल - राज्य

प्रतिक्रिया घटकों को अंदर डेटा द्वारा प्रबंधित किया जाता है state तथा props। इस अध्याय में, हम बात करेंगेstate

स्टेट और प्रॉप्स के बीच अंतर

state जबकि परिवर्तनशील है propsअपरिवर्तनीय हैं। इस का मतलब है किstate भविष्य में अद्यतन किया जा सकता है जबकि उचित अद्यतन नहीं किया जा सकता है।

राज्य का उपयोग कर

यह हमारी जड़ घटक है। हम सिर्फ आयात कर रहे हैंHome जिसका उपयोग अधिकाँश अध्यायों में किया जाएगा।

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

हम निम्न स्क्रीनशॉट में राज्य से एमुलेटर टेक्स्ट देख सकते हैं।

अद्यतन राज्य

चूँकि स्थिति परिवर्तनशील है, हम इसे बनाकर अपडेट कर सकते हैं deleteState फ़ंक्शन का उपयोग करके इसे कॉल करें onPress = {this.deleteText} प्रतिस्पर्धा।

Home.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

NOTES- सभी अध्यायों में, हम स्टेटफुल (कंटेनर) घटकों के लिए वर्ग सिंटैक्स का उपयोग करेंगे और स्टेटलेस (प्रेजेंटेशनल) घटकों के लिए फ़ंक्शन सिंटैक्स। हम अगले अध्याय में घटकों के बारे में अधिक जानेंगे।

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

तरीकों को परिभाषित करने का दूसरा तरीका EC5 फ़ंक्शंस का उपयोग करना है, लेकिन उस मामले में हमें बाध्य होना होगा thisकंस्ट्रक्टर में मैन्युअल। इसे समझने के लिए निम्नलिखित उदाहरण पर विचार करें।

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}