React.js এ ঘোষণামূলক এবং আবশ্যকীয় মধ্যে পার্থক্য?

Question

সাম্প্রতিককালে আমি কার্যকারিতা এবং ফেসবুক জাভাস্ক্রিপ্ট লাইব্রেরি রিঅ্যাক্ট.জেএস ব্যবহার করার উপায়গুলি সম্পর্কে অনেক অধ্যয়ন করেছি। যখন জাভাস্ক্রিপ্ট বিশ্বের প্রায়ই দুই প্রোগ্রামিং শৈলী বাকি তার পার্থক্যের ভাষী declarativeএবং imperativementionned করছে।

উভয়ের মধ্যে পার্থক্য কী?

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.

— rickyduck

টাইলার ম্যাকগিনিস এ সম্পর্কে একটি দীর্ঘ নিবন্ধ লিখেছিলেন কয়েকটি ভাল উদাহরণ দিয়ে।

— আয়ান ডান

কেন একটি মন্তব্য হিসাবে দীর্ঘ উত্তর যুক্ত করবেন? ..

— অ্যালেক্স

উপরের লিঙ্কটি সঠিক, কিন্তু একটি trailing স্ল্যাশ লিংক অন্তর্ভুক্ত 404. ঘটায় latentflip.com/imperative-vs-declarative

— জেমস ইয়ো

Answer 1

প্রতিক্রিয়াশীল শৈলী, যেমন প্রতিক্রিয়া দেখায় তার মত, আপনাকে "এটির মতো দেখতে হবে" বলে এই অ্যাপ্লিকেশনটিতে প্রবাহ এবং অবস্থা নিয়ন্ত্রণ করতে দেয়। একটি অপরিহার্য শৈলী এটি ঘুরিয়ে দেয় এবং "আপনার যা করা উচিত তা" এই বলে আপনি আপনার অ্যাপ্লিকেশন নিয়ন্ত্রণ করতে পারবেন।

ঘোষণার সুবিধাটি হ'ল আপনি রাষ্ট্রের প্রতিনিধিত্ব করার বিশদ বাস্তবায়নে বিশুদ্ধ হন না। আপনি আপনার অ্যাপ্লিকেশন মতামতগুলিকে সামঞ্জস্য রাখার সাংগঠনিক উপাদানটি অর্পণ করছেন যাতে আপনাকে কেবল রাষ্ট্র সম্পর্কে চিন্তা করতে হবে।

কল্পনা করুন আপনার একজন বাটলার আছেন, যিনি কাঠামোর জন্য রূপকের মতো। এবং আপনি রাতের খাবার তৈরি করতে চান। একটি অপরিহার্য বিশ্বে আপনি কীভাবে তাদের ডিনার তৈরি করবেন তা ধাপে ধাপে তাদের বলতেন would আপনাকে এই নির্দেশাবলী সরবরাহ করতে হবে:

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

এটি দুর্দান্ত উপমা:

* একটি অপরিহার্য প্রতিক্রিয়া : পার্কিংয়ের উত্তরের প্রস্থানটি থেকে বাইরে যান এবং বাম দিকে যান। আপনি ব্যাঙ্কার্টার হাইওয়ে থেকে প্রস্থান না হওয়া অবধি আই -15 দক্ষিণে উঠুন। আপনি যেমন Ikea যাচ্ছেন ঠিক তেমন প্রস্থান থেকে বাইরে যান। সোজা যান এবং প্রথম আলোতে ডান ধরুন। পরবর্তী আলোতে চালিয়ে যান তারপরে আপনার পরবর্তী বাম দিকে যান। আমার বাড়ি # 298।

একটি ঘোষিত প্রতিক্রিয়া : আমার ঠিকানা 298 পশ্চিম অপরিবর্তনীয় অ্যলি, ড্রপার ইউটা 84020 *

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

Answer 4

আপনাকে পার্থক্যগুলি দেখানোর জন্য প্রতিক্রিয়া (ঘোষণামূলক) এবং জিকুয়েরি (আবশ্যক) তুলনা করা ভাল।

প্রতিক্রিয়া হিসাবে, আপনাকে কেবল আপনার ইউআই এর চূড়ান্ত অবস্থাটি render()পদ্ধতিতে বর্ণনা করতে হবে , কীভাবে পূর্ববর্তী ইউআই রাষ্ট্র থেকে নতুন ইউআই অবস্থায় রূপান্তর করা যায় তা নিয়ে চিন্তা না করেই। যেমন,

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>
  )
}

অন্যদিকে, জিকুয়ের জন্য আপনাকে আপনার ইউআই অবস্থাটি জরুরীভাবে রূপান্তর করতে হবে, যেমন লেবেল উপাদান নির্বাচন করে এবং তাদের পাঠ্য এবং সিএসএস আপডেট করতে হবে:

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);
  ...
}

বাস্তব বিশ্বের দৃশ্যে, আরও অনেকগুলি ইউআই উপাদান আপডেট করার দরকার আছে, এর সাথে তাদের বৈশিষ্ট্যগুলি (যেমন, সিএসএস শৈলী এবং ইভেন্ট শ্রোতা) ইত্যাদি you আপনি যদি জিকুয়েরিটি অযৌক্তিকভাবে এটি ব্যবহার করেন তবে এটি জটিল ও ক্লান্তিকর হয়ে উঠবে; ইউআই এর কিছু অংশ আপডেট করা ভুলে যাওয়া সহজ, বা পুরানো ইভেন্ট হ্যান্ডলারগুলি অপসারণ করতে ভুলে যাওয়া (মেমরি ফাঁস হওয়া বা হ্যান্ডলারের একাধিকবার আগুন লাগার কারণ) ইত্যাদি etc. ইত্যাদি এখানেই বাগগুলি ঘটে, অর্থাত্ ইউআই রাজ্য এবং মডেল রাজ্যের বাইরে চলে গেছে সুসংগত.

সিঙ্কের বাইরে থাকা রাষ্ট্রগুলি কখনই রিএ্যাক্টের ঘোষণামূলক পদ্ধতির সাথে ঘটবে না, কারণ আমাদের কেবলমাত্র মডেল রাষ্ট্রটি আপডেট করতে হবে এবং ইউআই এবং মডেল রাজ্যগুলিকে সিঙ্কে রাখার জন্য রিঅ্যাক্ট দায়বদ্ধ।

• হুকের নীচে, প্রতিক্রিয়া অপরিহার্য কোড ব্যবহার করে সমস্ত পরিবর্তিত DOM উপাদান আপডেট করবে।

আপনি আমার উত্তরটি পড়তে পারেন এর জন্য ঘোষিত এবং আবশ্যক প্রোগ্রামিংয়ের মধ্যে পার্থক্য কী? ।

PS: উপরের jQuery উদাহরণ থেকে, আপনি কী ভাবতে পারেন যদি আমরা কোনও updateAll()পদ্ধতিতে সমস্ত ডিওএম ম্যানিপুলেশনগুলি রাখি এবং প্রতিবার যখন আমাদের কোনও মডেল রাষ্ট্র পরিবর্তন হয় এবং ইউআই কখনই সিঙ্কের বাইরে না যায়। আপনি সঠিক, এবং এটি কার্যকরভাবে প্রতিক্রিয়া দেখায় যা হ'ল, কেবল পার্থক্য হ'ল jQuery updateAll()অনেকগুলি অপ্রয়োজনীয় ডিওএম ম্যানিপুলেশন ঘটাবে, তবে প্রতিক্রিয়া কেবল তার ভার্চুয়াল ডোম ডিফিং আলগোরিদম ব্যবহার করে পরিবর্তিত ডোম উপাদানগুলিকে আপডেট করবে ।

Answer 5

কার্যকর কোডটি প্রতিটি পদক্ষেপটি কীভাবে সম্পাদন করা উচিত সে সম্পর্কে জাভাস্ক্রিপ্টকে নির্দেশ দেয়। ঘোষিত কোডের সাথে আমরা জাভাস্ক্রিপ্টকে বলি যে আমরা কী করতে চাই এবং জাভাস্ক্রিপ্টকে পদক্ষেপগুলি সম্পাদন করার যত্ন নিতে দিন।

প্রতিক্রিয়া ঘোষিত কারণ আমরা আমাদের যে কোডটি চাই তা লিখি এবং প্রতিক্রিয়াটি আমাদের ঘোষিত কোডটি গ্রহণ এবং জাভাস্ক্রিপ্ট / ডম সমস্ত পদক্ষেপ নেওয়ার দায়িত্বে থাকে যাতে আমাদের আমাদের পছন্দসই ফলাফলের দিকে নিয়ে যায়।

Answer 6

অপরিহার্য বিশ্বের এক বাস্তব জীবনের সমান্তরাল একটি বিয়ারের জন্য একটি বারে প্রবেশ করানো এবং বারটেন্ডারকে নিম্নলিখিত নির্দেশগুলি দিয়ে যাচ্ছিল:

- তাক থেকে একটি গ্লাস নিন

- খসড়াটির সামনে গ্লাসটি রাখুন

- কাচ পূর্ণ না হওয়া পর্যন্ত হ্যান্ডেলটি টানুন

- আমাকে কাচ দাও।

ঘোষণামূলক বিশ্বে, পরিবর্তে, আপনি কেবল বলেছেন: "বিয়ার, দয়া করে।"

একটি বিয়ার জিজ্ঞাসা করার ঘোষণামূলক পদ্ধতির ধারণা ধরে নেওয়া হয় যে বারটেন্ডার কীভাবে পরিষেবা প্রদান করতে জানে, এবং এটি ঘোষণামূলক প্রোগ্রামিংয়ের কাজ করার একটি গুরুত্বপূর্ণ দিক।

ঘোষিত প্রোগ্রামিংয়ে, বিকাশকারীরা কেবল তারা কী অর্জন করতে চান তা বর্ণনা করে এবং এটি কার্যকর করার জন্য সমস্ত পদক্ষেপের তালিকা করার দরকার নেই।

প্রতিক্রিয়াটি একটি ঘোষণামূলক পদ্ধতির প্রস্তাব দেয় এ বিষয়টি ব্যবহার করা সহজ করে তোলে এবং ফলস্বরূপ ফলাফল ফলাফলটি সহজ, যা প্রায়শই কম বাগ এবং আরও রক্ষণাবেক্ষণের দিকে পরিচালিত করে।

যেহেতু প্রতিক্রিয়া একটি ঘোষণামূলক দৃষ্টান্ত অনুসরণ করে এবং এটি কীভাবে DOM এর সাথে ইন্টারেক্ট করতে হয় তা বলার দরকার নেই; আপনি কেবল পর্দায় যা দেখতে চান তা নির্ধারণ করুন এবং প্রতিক্রিয়া আপনার জন্য কাজ করে।

Answer 7

ডিক্লারেটিভ প্রোগ্রামিং হ'ল একটি প্রোগ্রামিং দৃষ্টান্ত… যা কোনও নিয়ন্ত্রণের প্রবাহ বর্ণনা না করেই কোনও গণনার যুক্তি প্রকাশ করে।

ইমপিটেটিভ প্রোগ্রামিং হ'ল একটি প্রোগ্রামিং দৃষ্টান্ত যা এমন স্টেটমেন্ট ব্যবহার করে যা কোনও প্রোগ্রামের অবস্থা পরিবর্তন করে।

রেফ লিঙ্ক: - https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

Answer 8

আমি একটি উপমা দিয়ে শুরু করব: আমার দুটি গাড়ি রয়েছে, আমার দুটি গাড়িতে আমি চাই আমার গাড়ির অভ্যন্তরে তাপমাত্রা স্বাভাবিক ঘরের তাপমাত্রা ~ 72। F হোক be প্রথম (পুরানো) গাড়িতে তাপমাত্রা নিয়ন্ত্রণ করার জন্য দুটি টি নকব রয়েছে (তাপমাত্রা নিয়ন্ত্রণ করতে 1 টি নকব এবং বায়ুপ্রবাহকে নিয়ন্ত্রণ করতে 1 টি নকব)। যখন এটি খুব উত্তপ্ত হয়ে যায়, তখন তাপমাত্রা কমানোর জন্য আমাকে প্রথম গিরিটি সামঞ্জস্য করতে হবে এবং সম্ভবত এয়ারফ্লো পরিবর্তন করতে হবে) এবং খুব শীতকালে ভাইস শ্লোকে। এটি আবশ্যক কাজ! আমাকে নিজেই নক করতে হবে। আমার দ্বিতীয় (নতুন) গাড়িতে আমি তাপমাত্রা নির্ধারণ / ঘোষণা করতে পারি। যার অর্থ আমার গাড়িটি যে তাপমাত্রা ঘোষণা করে / ঠিক সেটিকে 72 ডিগ্রি ফারেনসেটে সেট করে তা জানার জন্য আমাকে নোবস দিয়ে গলগল করতে হবে না এবং আমার গাড়ি সেই অবস্থায় যাওয়ার জন্য আবশ্যক কাজ করবে।

প্রতিক্রিয়া একই, আপনি মার্কআপ / টেমপ্লেট এবং স্ট্যাটাকে ঘোষণা করেন তারপরে আপনার অ্যাপ্লিকেশনটির সাথে ডিওএম সিঙ্কে রাখার জন্য আবশ্যক কাজটি প্রতিক্রিয়া দেখায়।

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

.addEventListener()ইভেন্ট হ্যান্ডলিং সেট আপ করতে ব্যবহার করার পরিবর্তে , আমরা কী চাই তা ঘোষণা করি। বোতামটি ক্লিক করা হলে, এটি activateTeleporterফাংশনটি চালাবে ।

Answer 9

• ঘোষণাপত্র আপনাকে সমস্ত দর্শন নিয়ন্ত্রণের অনুমতি দেয়। (রাষ্ট্র পরিচালনার মতো)
• অত্যাবশ্যক আপনাকে চারপাশের দর্শন নিয়ন্ত্রণের অনুমতি দেয়। (যেমন $ (এটি))