React.js में घोषणात्मक और अनिवार्य के बीच अंतर?

Question

हाल ही में मैं फेसबुक जावास्क्रिप्ट लाइब्रेरी React.js की कार्यक्षमता और उपयोग करने के तरीकों के बारे में बहुत अध्ययन कर रहा हूं। जब जावास्क्रिप्ट दुनिया के बाकी हिस्सों के लिए अपने मतभेदों की बात करते हैं तो अक्सर दो प्रोग्रामिंग शैलियों declarativeऔर imperativeउल्लेख किया जाता है।

दोनों में क्या अंतर है?

Comments

latentflip.com/imperative-vs-declarative Imperative programming: telling the "machine" how to do something, and as a result what you want to happen will happen. Declarative programming: telling the "machine"1 what you would like to happen, and let the computer figure out how to do it.

— रिकड्यूक

टायलर मैकगिनिस ने कुछ अच्छे उदाहरणों के साथ इस पर एक लंबा लेख लिखा ।

— इयान डन

टिप्पणी के रूप में लंबे उत्तर को क्यों जोड़ा जाए? ..

— एलेक्स

उपरोक्त लिंक सही है, लेकिन लिंक में शामिल एक अनुगामी स्लैश 404 का कारण बनता है। latentflip.com/imperative-vs-declarative

— जेम्स यू

Answer 1

एक घोषणात्मक शैली, जैसे कि क्या प्रतिक्रिया होती है, आपको "यह इस तरह दिखना चाहिए" कहकर अपने आवेदन में प्रवाह और स्थिति को नियंत्रित करने की अनुमति देता है। एक अनिवार्य शैली बदल जाती है कि चारों ओर और आपको "यह वही है जो आपको करना चाहिए" कहकर अपने आवेदन को नियंत्रित करने की अनुमति देता है।

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

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

Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table

एक घोषणात्मक दुनिया में, आप बस यह वर्णन करेंगे कि आप क्या चाहते हैं

I want dinner with chicken.

यदि आपका बटलर चिकन बनाना नहीं जानता है, तो आप घोषित शैली में काम नहीं कर सकते। ठीक उसी तरह जैसे अगर बैकबोन नहीं जानता कि किसी खास काम को करने के लिए खुद को कैसे म्यूट करना है, तो आप इसे उस काम को करने के लिए नहीं कह सकते। उदाहरण के लिए, प्रतिक्रियात्मक होने में सक्षम है क्योंकि यह "चिकन बनाना जानता है"। बैकबोन की तुलना में, जो केवल रसोई के साथ इंटरफेस करना जानता है।

राज्य का वर्णन करने में सक्षम होने से नाटकीय रूप से कीड़े के लिए सतह क्षेत्र कम हो जाता है, जो कि एक लाभ है। दूसरी ओर, आपके पास कम लचीलापन हो सकता है कि चीजें कैसे होती हैं क्योंकि आप राज्य को कार्यान्वित करने के तरीके को दूर कर रहे हैं या अमूर्त कर रहे हैं।

Answer 2

एक सरल यूआई घटक की कल्पना करें, जैसे कि "लाइक" बटन। जब आप इसे टैप करते हैं, तो यह नीला हो जाता है यदि यह पहले ग्रे था, और ग्रे अगर यह पहले नीला था।

ऐसा करने का अनिवार्य तरीका होगा:

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

मूल रूप से, आपको यह देखना होगा कि वर्तमान में स्क्रीन पर क्या है और पिछले राज्य से परिवर्तनों को पूर्ववत करने सहित वर्तमान स्थिति के साथ इसे फिर से चालू करने के लिए आवश्यक सभी परिवर्तनों को संभालना है। आप कल्पना कर सकते हैं कि यह वास्तविक दुनिया के परिदृश्य में कितना जटिल हो सकता है।

इसके विपरीत, घोषणात्मक दृष्टिकोण होगा:

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

क्योंकि घोषणात्मक दृष्टिकोण चिंताओं को अलग करता है, इसके इस हिस्से को केवल यह संभालने की आवश्यकता है कि यूआई को किस तरह से एक अजीब अवस्था में दिखना चाहिए, और इसलिए यह समझने में बहुत सरल है।

Answer 3

यह महान उपमा है:

* एक अनिवार्य प्रतिक्रिया : पार्किंग स्थल के उत्तरी निकास से बाहर जाएं और बाईं ओर जाएं। जब तक आप बैंगरटर हाइवे से बाहर निकलें, I-15 दक्षिण की ओर निकल जाएं। जैसे आप आइकिया जा रहे हैं, उससे बाहर निकलने का अधिकार लें। सीधे जाएं और पहले प्रकाश पर एक अधिकार लें। अगले प्रकाश के माध्यम से जारी रखें और फिर अपना अगला बाईं ओर ले जाएं। मेरा घर # 298 है।

एक घोषणापत्र प्रतिक्रिया : मेरा पता 298 पश्चिम अपरिवर्तनीय गली, ड्रेपर यूटा 84020 * है

https://tylermcginnis.com/imperative-vs-declarative-programming/

Answer 4

आपको अंतर दिखाने के लिए रिएक्ट (घोषणात्मक) और JQuery (अनिवार्य) की तुलना करना सबसे अच्छा है।

प्रतिक्रिया में, आपको केवल अपने UI की अंतिम स्थिति का वर्णन करने की आवश्यकता है render(), बिना इस बात की परवाह किए कि पिछले UI राज्य से नए UI राज्य में संक्रमण कैसे किया जाए। उदाहरण के लिए,

render() {
  const { price, volume } = this.state;
  const totalPrice = price * volume;

  return (
    <div>
      <Label value={price} className={price > 100 ? 'expensive' : 'cheap'} ... />
      <Label value={volume} className={volume > 1000 ? 'high' : 'low'} ... />
      <Label value={totalPrice} ... />
      ...
    </div>
  )
}

दूसरी ओर, JQuery को अपने UI स्थिति को अनिवार्य रूप से बदलने की आवश्यकता होती है, उदाहरण के लिए, लेबल तत्वों का चयन करना और उनके पाठ और CSS को अपडेट करना:

updatePrice(price) {
  $("#price-label").val(price);
  $("#price-label").toggleClass('expansive', price > 100);
  $("#price-label").toggleClass('cheap', price < 100);

  // also remember to update UI depending on price 
  updateTotalPrice();
  ... 
}

updateVolume(volume) {
  $("#volume-label").val(volume);
  $("#volume-label").toggleClass('high', volume > 1000);
  $("#volume-label").toggleClass('low', volume < 1000);
  
  // also remember to update UI depending on volume
  updateTotalPrice();
  ... 
}

updateTotalPrice() {
  const totalPrice = price * volume;
  $("#total-price-label").val(totalPrice);
  ...
}

वास्तविक दुनिया के परिदृश्य में, अपडेट किए जाने वाले कई और UI तत्व होंगे, साथ ही उनकी विशेषताएँ (जैसे, CSS शैलियाँ और ईवेंट श्रोता), आदि। यदि आप इसे अनिवार्य रूप से JQuery का उपयोग करते हैं, तो यह जटिल और थकाऊ हो जाएगा; UI के कुछ हिस्सों को अपडेट करना, या पुराने ईवेंट हैंडलर (कारण मेमोरी लीक या हैंडलर से कई बार आग लगना) को भूल जाना आसान है, आदि। यह वह जगह है जहां बग्स होते हैं, यानी, यूआई राज्य और मॉडल राज्य से बाहर हैं सिंक।

सिंक से बाहर के राज्य रिएक्ट के घोषणात्मक दृष्टिकोण के लिए कभी नहीं होंगे, क्योंकि हमें केवल मॉडल स्थिति को अपडेट करने की आवश्यकता है, और रिएक्ट UI और मॉडल राज्यों को सिंक में रखने के लिए जिम्मेदार है।

• हुक के तहत, रिएक्ट सभी परिवर्तित डोम तत्वों को अनिवार्य कोड का उपयोग करके अपडेट करेगा।

घोषणात्मक और अनिवार्य प्रोग्रामिंग के बीच अंतर क्या है, इसके लिए आप मेरा जवाब भी पढ़ सकते हैं ।।

पुनश्च: ऊपर jQuery के उदाहरण से, आप सोच सकते हैं कि क्या होगा यदि हम सभी DOM जोड़तोड़ को एक updateAll()विधि में रखते हैं, और इसे हर बार कॉल करते हैं जब हमारा कोई मॉडल राज्य बदलता है, और UI कभी भी सिंक से बाहर नहीं होगा। आप सही हैं, और यह प्रभावी रूप से रिएक्ट क्या करता है, एकमात्र अंतर यह है कि jQuery updateAll()कई अनावश्यक DOM जोड़तोड़ का कारण बनेगा, लेकिन React अपने वर्चुअल DOM डिफिंग अल्गोरिथम का उपयोग करके केवल DOM तत्वों को बदलेगा ।

Answer 5

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

React घोषणात्मक है क्योंकि हम वह कोड लिखते हैं जो हम चाहते हैं और प्रतिक्रिया हमारे घोषित कोड को लेने और अपने वांछित परिणाम के लिए हमें प्राप्त करने के लिए सभी JavaScript / DOM चरणों का प्रदर्शन करने के लिए होती है।

Answer 6

अपूर्ण दुनिया में समानांतर एक वास्तविक जीवन एक बियर के लिए एक बार में प्रवेश करेगा, और बारटेंडर को निम्नलिखित निर्देश देगा:

- शेल्फ से एक गिलास लें

- ड्राफ्ट के सामने ग्लास रखें

- गिलास भर जाने तक हैंडल को नीचे गिरा दें

- मुझे ग्लास डालो।

घोषित दुनिया में, इसके बजाय, आप बस कहेंगे: "बीयर, कृपया।"

बीयर माँगने का घोषणात्मक दृष्टिकोण मानता है कि बारटेंडर जानता है कि किसी को कैसे सेवा करनी है, और यह घोषणात्मक प्रोग्रामिंग कार्यों के तरीके का एक महत्वपूर्ण पहलू है।

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

तथ्य यह है कि रिएक्ट एक घोषणात्मक दृष्टिकोण प्रदान करता है इसका उपयोग करना आसान है, और परिणामस्वरूप, परिणामी कोड सरल है, जो अक्सर कम बग और अधिक रखरखाव की ओर जाता है।

चूंकि रिएक्ट एक घोषणात्मक प्रतिमान का पालन करता है, और इसे डोम के साथ बातचीत करने का तरीका बताने की कोई आवश्यकता नहीं है; आप बस स्क्रीन पर देखना चाहते हैं और प्रतिक्रिया आपके लिए काम करती है।

Answer 7

घोषणात्मक प्रोग्रामिंग एक प्रोग्रामिंग प्रतिमान है ... जो अपने नियंत्रण प्रवाह का वर्णन किए बिना एक संगणना के तर्क को व्यक्त करता है।

इम्पीरेटिव प्रोग्रामिंग एक प्रोग्रामिंग प्रतिमान है जो एक प्रोग्राम की स्थिति को बदलने वाले बयानों का उपयोग करता है।

रेफरी लिंक: - https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

Answer 8

मैं एक सादृश्य के साथ शुरू करूंगा: मेरे पास दो कारें हैं, मेरी दो कारों में मैं चाहता हूं कि मेरी कार के अंदर का तापमान सामान्य कमरे के तापमान ~ 72 ° F हो। पहली (पुरानी) कार में, तापमान को नियंत्रित करने के लिए दो घुंडी होती है (तापमान को नियंत्रित करने के लिए 1 घुंडी और वायु प्रवाह को नियंत्रित करने के लिए 1 घुंडी)। जब यह बहुत गर्म हो जाता है, तो मुझे तापमान को कम करने के लिए पहले घुंडी को समायोजित करना होगा और शायद हवा का प्रवाह बदल सकता है) और इसके विपरीत अगर यह बहुत ठंडा है। यह जरूरी काम है! मुझे खुद ही गांठ का प्रबंधन करना होगा। अपनी दूसरी (नई) कार में, मैं तापमान सेट / घोषित कर सकता हूं। इसका मतलब है कि मुझे अपनी कार के तापमान को समायोजित करने के लिए knobs के साथ फिडेल करने की ज़रूरत नहीं है, मुझे पता है कि मैं इसे 72 ° F पर घोषित / सेट करता हूं और मेरी कार उस स्थिति को प्राप्त करने के लिए अनिवार्य काम करेगी।

प्रतिक्रिया समान है, आप मार्कअप / टेम्प्लेट और स्टेट घोषित करते हैं फिर रिएक्ट डोम को आपके ऐप के साथ तालमेल रखने के लिए जरूरी काम करता है।

<button onClick={activateTeleporter}>Activate Teleporter</button>

.addEventListener()ईवेंट हैंडलिंग सेट अप करने के लिए उपयोग करने के बजाय , हम घोषणा करते हैं कि हम क्या चाहते हैं। जब बटन पर क्लिक किया जाता है, तो यह activateTeleporterफ़ंक्शन चलाएगा ।

Answer 9

• घोषणापत्र आपको सभी दृश्य को नियंत्रित करने की अनुमति देता है। (राज्य प्रबंधन की तरह)
• इम्पीरियल आपको दृश्य के आसपास नियंत्रित करने की अनुमति है। ($ के रूप में (यह))