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

स्टेट और प्रॉप्स क्या हैं?

राज्य

स्टेट एक अंतर्निहित ऑब्जेक्ट है जो घटकों को अपना डेटा बनाने और प्रबंधित करने की अनुमति देता है। इसमें ऐसी जानकारी होती है जो घटक के जीवनचक्र के दौरान बदल सकती है। जब भी स्थिति बदलती है, घटक उन परिवर्तनों को प्रतिबिंबित करने के लिए पुन: प्रस्तुत होता है।

• Mutable: राज्य को सेटस्टेट (क्लास घटकों में) या यूज़स्टेट हुक (कार्यात्मक घटकों में) का उपयोग करके बदला जा सकता है।
• घटक के लिए स्थानीय: राज्य पूरी तरह से संक्षिप्त है और घटक के लिए स्थानीय है।
• ट्रिगर्स री-रेंडर: स्थिति को अपडेट करने से घटक फिर से रेंडर होता है।

प्रॉप्स

प्रोप्स, प्रॉपर्टी का संक्षिप्त रूप, केवल-पढ़ने योग्य घटक हैं। वे एक घटक में पारित किए गए बाहरी पैरामीटर हैं, जैसे किसी फ़ंक्शन में तर्क कैसे पारित किए जाते हैं।

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

अंतर को समझना

स्टेट का उपयोग कब करना है और प्रॉप्स का उपयोग कब करना है यह समझना आपके ऐप में डेटा प्रवाह को प्रबंधित करने की कुंजी है।

वे महत्वपूर्ण क्यों हैं?

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

डेटा प्रवाह को प्रभावी ढंग से प्रबंधित करना

प्रभावी डेटा प्रवाह प्रबंधन यह सुनिश्चित करता है कि आपका ऐप पूर्वानुमानित व्यवहार करता है और डीबग और रखरखाव करना आसान है।

1. एक तरफ़ा डेटा प्रवाह

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

2. राज्य को ऊपर उठाना

जब एकाधिक घटकों को डेटा के एक ही टुकड़े तक पहुंच की आवश्यकता होती है, तो राज्य को निकटतम सामान्य पूर्वज तक उठाना सबसे अच्छा होता है। इस तरह, साझा स्थिति को प्रॉप्स के माध्यम से पारित किया जा सकता है।

3. बच्चे से माता-पिता के बीच संचार के लिए कॉलबैक का उपयोग करना

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

उदाहरण

आइए इन अवधारणाओं को स्पष्ट करने के लिए कुछ कोड उदाहरण देखें।

उदाहरण 1: प्रॉप्स का उपयोग करना

मूल घटक (App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
  );
};

export default App;

बाल घटक (अभिवादन.जेएस):

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

स्पष्टीकरण:

• ऐप घटक ग्रीटिंग घटक को नाम प्रोप भेजता है।
• ग्रीटिंग घटक प्रॉप्स प्राप्त करता है और वैयक्तिकृत संदेश प्रदर्शित करने के लिए प्रॉप्स.नाम का उपयोग करता है।

उदाहरण 2: राज्य का उपयोग करना

काउंटर घटक (काउंटर.जेएस):

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    You clicked {count} times setCount(count   1)} />
    
  );
};

export default Counter;

स्पष्टीकरण:

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

उदाहरण 3: राज्य को ऊपर उठाना

मूल घटक (तापमान कनवर्टर.जेएस):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
  );
};

export default TemperatureConverter;

बाल घटक (TemperatureInput.js):

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

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:>
  );
};

export default TemperatureInput;

स्पष्टीकरण:

• साझा स्थिति तापमान और पैमाने को टेम्परेचर कनवर्टर घटक तक बढ़ा दिया जाता है।
• तापमान इनपुट घटक प्रॉप्स प्राप्त करते हैं और कॉलबैक के माध्यम से पैरेंट को परिवर्तनों के बारे में सूचित करते हैं।

सर्वोत्तम प्रथाएं

1. जब संभव हो तो घटकों को स्टेटलेस रखें

स्टेटलेस घटकों का परीक्षण और डीबग करना आसान है। उन तक डेटा भेजने के लिए प्रॉप्स का उपयोग करें।

2. स्टेटफुलनेस कम से कम करें

केवल आवश्यक होने पर ही राज्य का उपयोग करें। बहुत सारे स्टेटफुल घटक आपके ऐप को प्रबंधित करना कठिन बना सकते हैं।

3. प्रत्यक्ष राज्य उत्परिवर्तन से बचें

कभी भी राज्य को सीधे रूप से परिवर्तित न करें। हमेशा setState या useState से अपडेटर फ़ंक्शन का उपयोग करें।

4. प्रकार की जाँच के लिए PropTypes का उपयोग करें

घटकों को दिए गए इच्छित प्रकार के गुणों का दस्तावेज़ीकरण करने के लिए PropTypes का उपयोग करें।

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. वैश्विक स्थिति के लिए संदर्भ एपीआई का उपयोग करें

विभिन्न नेस्टिंग स्तरों पर कई घटकों द्वारा पहुंच योग्य डेटा के लिए, कॉन्टेक्स्ट एपीआई का उपयोग करने पर विचार करें।

बचने योग्य सामान्य गलतियाँ

• राज्य को सीधे परिवर्तित करना:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• मूल राज्य को सीधे संशोधित करने के लिए प्रॉप्स का उपयोग करना:

चाइल्ड घटकों को सीधे प्रॉप्स या मूल स्थिति को संशोधित करने का प्रयास नहीं करना चाहिए। कॉलबैक का उपयोग करें।

निष्कर्ष

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

याद करना:

• State उस डेटा के लिए है जो समय के साथ बदलता है और घटक के भीतर प्रबंधित होता है।
• प्रॉप्स घटक ट्री के नीचे डेटा और फ़ंक्शन को पास करने के लिए हैं।

अपनी परियोजनाओं में इन अवधारणाओं का अभ्यास करने के लिए समय निकालें, और आप अपने विकास कार्यप्रवाह में एक महत्वपूर्ण सुधार देखेंगे।