'প্রতিক্রিয়া, সবকিছু একটি উপাদান'
আপনি যদি প্রতিক্রিয়াটির সাথে পরিচিত হন, তবে আপনি অবশ্যই এই বাক্যাংশটি বহুবার শুনেছেন বা পড়েছেন। তবে আপনি কি জানেন এটির অর্থ কী এবং এটি কীভাবে ব্যবহৃত হয়? যদি আপনি তা না করেন, তবে প্রতিক্রিয়া উপাদান এবং লাইফসাইকের বিভিন্ন ধাপগুলি সম্পর্কে সমস্ত কিছু জানতে এই ব্লগটি পড়ুন। আপনি শেষ করার পরে আমি নিশ্চিত এই ব্লগটি পড়তে আপনার প্রতিক্রিয়া উপাদান এবং এর চারপাশের ধারণাগুলি সম্পর্কে সম্পূর্ণ ধারণা থাকবে। তবে এগিয়ে যাওয়ার আগে, আমি যে বিষয়গুলি নিয়ে আলোচনা করব তা একবার দেখুন:
- প্রতিক্রিয়া উপাদানগুলি কী কী?
- প্রতিক্রিয়া উপাদানগুলির সুবিধা
- প্রপস
- রাজ্যসমূহ
- রাজ্য বনাম প্রপস
- কম্পোনেন্ট লাইফসাইকেল প্রতিক্রিয়া
প্রতিক্রিয়া উপাদানগুলি কী কী?
এর আগে বিকাশকারীদের একটি একক পৃষ্ঠার অ্যাপ্লিকেশন বিকাশের জন্য 1000 লাইন কোড লিখতে হয়েছিল। এই অ্যাপ্লিকেশনগুলির বেশিরভাগই traditionalতিহ্যবাহী ডিওএম কাঠামো অনুসরণ করেছিল এবং সেগুলিতে পরিবর্তন করা খুব চ্যালেঞ্জিং এবং বিকাশকারীদের জন্য এক ক্লান্তিকর কাজ ছিল।তাদের ম্যানুয়ালি সেই উপাদানটি অনুসন্ধান করতে হয়েছিল যা পরিবর্তনের প্রয়োজন হয়েছিল এবং সেই অনুযায়ী এটি আপডেট করতে হয়েছিল। এমনকি একটি ছোট ভুল প্রয়োগ ব্যর্থতা হতে পারে। তদুপরি, ডিওএম আপডেট করা খুব ব্যয়বহুল ছিল। সুতরাং, উপাদান-ভিত্তিক পদ্ধতির চালু হয়েছিল। এই পদ্ধতির মধ্যে, সম্পূর্ণ অ্যাপ্লিকেশনটি যৌক্তিক অংশগুলিতে বিভক্ত হয় যা উপাদানগুলি বলা হয়। প্রতিক্রিয়া ছিল এমন ফ্রেমওয়ার্কগুলির মধ্যে একটি যা এই পদ্ধতির পক্ষে চেয়েছিল।যদি আপনি ওয়েব বিকাশে আপনার ক্যারিয়ার গড়ার পরিকল্পনা করে থাকেন তবে তাড়াতাড়ি শুরু করা আপনার জন্য প্রচুর সুযোগ খুলে দেবে।
আসুন এখন বুঝতে পারি এই উপাদানগুলি কী।
প্রতিক্রিয়া উপাদানগুলি ব্যবহারকারী ইন্টারফেসের বিল্ডিং ব্লক হিসাবে বিবেচিত হয়। এই উপাদানগুলির প্রতিটি একই স্থানের মধ্যে বিদ্যমান তবে একে অপরের থেকে স্বাধীনভাবে কার্যকর করে। প্রতিক্রিয়াযুক্ত উপাদানগুলির নিজস্ব কাঠামো, পদ্ধতিগুলির পাশাপাশি এপিআই রয়েছে। এগুলি পুনরায় ব্যবহারযোগ্য এবং প্রয়োজন অনুসারে ইন্টারফেসগুলিতে ইনজেকশনের ব্যবস্থা করা যেতে পারে। আরও ভাল বোঝার জন্য, পুরো ইউআইকে একটি গাছ হিসাবে বিবেচনা করুন।এখানে প্রারম্ভিক উপাদানটি মূল হয়ে যায় এবং প্রতিটি স্বতন্ত্র টুকরো শাখায় পরিণত হয়, যা আরও উপ-শাখায় বিভক্ত।
এটি আমাদের ইউআইকে সুসংহত রাখে এবং ডেটা এবং রাজ্যের পরিবর্তনগুলিকে মূল থেকে শাখাগুলিতে এবং তারপরে উপ-শাখায় প্রবাহিত করতে দেয়। উপাদানগুলি ক্লায়েন্ট-সাইড থেকে সরাসরি সার্ভারে কল দেয় যা পৃষ্ঠাটি রিফ্রেশ না করে DOMকে গতিশীল আপডেট করতে দেয়। এটি কারণ প্রতিক্রিয়া উপাদানগুলি AJAX অনুরোধগুলির ধারণার উপর নির্মিত। প্রতিটি উপাদানটির নিজস্ব ইন্টারফেস রয়েছে যা সার্ভারে কল করতে এবং সেগুলি আপডেট করতে পারে। এই উপাদানগুলি একে অপরের থেকে স্বতন্ত্র থাকায় প্রতিটি একে অপরকে বা পুরো ইউআইকে প্রভাবিত না করে রিফ্রেশ করতে পারে।
আমরা ব্যাবহার করি React.createClass () একটি উপাদান তৈরি করার পদ্ধতি। এই পদ্ধতিটি অবশ্যই একটি অবজেক্ট আর্গুমেন্ট পাস করতে হবে যা প্রতিক্রিয়া উপাদানটিকে সংজ্ঞায়িত করবে। প্রতিটি উপাদান অবশ্যই এক হতে হবে রেন্ডার () পদ্ধতি এটি কোনও উপাদানটির সর্বাধিক গুরুত্বপূর্ণ সম্পত্তি যা জাভাস্ক্রিপ্ট, জেএসএক্স, এইচটিএমএল পার্স করার জন্য দায়ী। এই রেন্ডার () ডিওএম নোড হিসাবে উপাদানটির এইচটিএমএল উপস্থাপনা ফিরিয়ে দেবে। অতএব, সমস্ত এইচটিএমএল ট্যাগ অবশ্যই একটি অভ্যন্তরীণ ট্যাগের মধ্যে আবদ্ধ থাকতে হবে রেন্ডার () ।
নিম্নলিখিতটি একটি উপাদান তৈরি করার জন্য একটি নমুনা কোড রয়েছে।
আমদানি করুন 'রিএ্যাক্ট' আমদানি থেকে প্রতিক্রিয়া করুন 'রিঅ্যাক্ট-ডোম' শ্রেণি থেকে রিঅ্যাক্টডোম মাই কম্পোম্পোনেন্ট রিঅ্যাক্ট বাড়ায় omp উপাদানগুলি nder রেন্ডার () {রিটার্ন (আপনার আইডি {this.state.id is
)} Act ReactDOM.render (, document.getElementById ('সামগ্রী'))রাজ্য বনাম প্রপস
কম্পোনেন্ট লাইফসাইকেল প্রতিক্রিয়া
প্রতিক্রিয়া বিভিন্ন পদ্ধতি সরবরাহ করে যা অবগত করে যখন কোনও উপাদানটির জীবনকালীন একটি নির্দিষ্ট পর্যায়ে ঘটে। এই পদ্ধতিগুলিকে জীবনচক্র পদ্ধতিগুলি বলা হয়। এই জীবনচক্র পদ্ধতিগুলি খুব জটিল নয়। আপনি এই পদ্ধতিগুলিকে বিশেষায়িত ইভেন্ট হ্যান্ডলার হিসাবে ভাবতে পারেন যা একটি উপাদান জীবনের সময় বিভিন্ন পয়েন্টে ডাকা হয়। এমনকি বিভিন্ন কাজ সম্পাদনের জন্য আপনি এই পদ্ধতিগুলিতে নিজের কোড যুক্ত করতে পারেন। উপাদানটির জীবনচক্র সম্পর্কে কথা বললে, জীবনচক্রটি 4 টি পর্যায়ে বিভক্ত। তারা হ'ল:
- প্রাথমিক পর্যায়ে
- পর্ব আপডেট করা হচ্ছে
- প্রপস ফেজ পরিবর্তন
- আনমাউন্টিং ফেজ
এই প্রতিটি ধাপে কিছু জীবনচক্র পদ্ধতি রয়েছে যা কেবল তাদের জন্য নির্দিষ্ট। সুতরাং আসুন এখন এই প্রতিটি পর্যায়ের সময়ে কী ঘটে তা সন্ধান করি।
ক। প্রাথমিক পর্যায়ে - একটি প্রতিক্রিয়া উপাদানটির জীবনচক্রের প্রথম ধাপটি প্রাথমিক পর্যায়ে বা প্রাথমিক রেন্ডারিং পর্ব। এই পর্যায়ে,উপাদানটি তার যাত্রা শুরু করতে চলেছে এবং ডিওএম এ পাবে। এই পর্যায়ে নিম্নলিখিত পদ্ধতিগুলি নিয়ে গঠিত যা পূর্বনির্ধারিত ক্রমে ডাকা হয়।
- getDefaultProp (): এই পদ্ধতিটি এর ডিফল্ট মান নির্দিষ্ট করতে ব্যবহৃত হয় this.prop । আপনার উপাদানটি তৈরি হওয়ার আগেই বা পিতা-মাতার কাছ থেকে কোনও প্রপস এতে প্রবেশের আগেই এটি কল হয়ে যায়।
- getInitialState (): এই পদ্ধতিটি অভ্যস্তনির্দিষ্ট করা এর ডিফল্ট মান this.state আপনার উপাদান তৈরি হওয়ার আগে।
- উপাদানবিশেষমাউন্ট (): এটি শেষ পদ্ধতি যা আপনার উপাদানটি ডিওমে রেন্ডার হওয়ার আগে কল করতে পারে। তবে ফোন দিলে সেটস্টেট () এই পদ্ধতির ভিতরে আপনার উপাদানটি পুনরায় রেন্ডার করবে না।
- রেন্ডার (): থ পদ্ধতিটি একটি একক রুট এইচটিএমএল নোড ফিরিয়ে দেওয়ার জন্য দায়ী এবং অবশ্যই প্রতিটি উপাদানগুলিতে সংজ্ঞায়িত করা উচিত। আপনি ফিরে আসতে পারেন শূন্য বা মিথ্যা আপনি যদি কোনও কিছু রেন্ডার করতে না চান তবে।
- উপাদান ডিডমাউন্ট (): একবার উপাদানটি রেন্ডার হয়ে ডিওএম এ স্থাপন করা হয়, এটি পদ্ধতি বলা হয়। এখানে আপনি যে কোনও ডিওএম অনুসন্ধান অপারেশন করতে পারেন।
খ। পর্যায়ক্রমে আপডেট করা - একবার ডিওএম-তে উপাদান যুক্ত হয়ে গেলে তারা কেবল তখনই কোনও রাষ্ট্র পরিবর্তন ঘটে যখন আপডেট করে পুনরায় রেন্ডার করতে পারে। প্রতিবারের রাষ্ট্র পরিবর্তন হওয়ার সাথে সাথে উপাদানটি তার কল করে রেন্ডার () আবার। যে কোনও উপাদান, যা এই উপাদানটির আউটপুট উপর নির্ভর করে সেটিকে এটি কল করবে রেন্ডার () আবার। আমাদের উপাদান নিজেই সর্বশেষতম সংস্করণ প্রদর্শন করছে তা নিশ্চিত করার জন্য এটি করা হয়েছে। সুতরাং উপাদানগুলি সফলভাবে আপডেট করার জন্য নিম্নলিখিত পদ্ধতিগুলিকে প্রদত্ত ক্রমে অনুরোধ করা হয়েছে:
- shouldCompenderUpdate (): এই পদ্ধতিটি ব্যবহার করে আপনি নিজের আপডেট হওয়ার ক্ষেত্রে আপনার উপাদানটির আচরণ নিয়ন্ত্রণ করতে পারেন। আপনি যদি এই পদ্ধতি থেকে সত্য ফিরে পান,উপাদান আপডেট হবে। অন্যথায় যদি এই পদ্ধতিটি ফিরে আসেমিথ্যা, উপাদান আপডেটটি এড়িয়ে যাবে।
- উপাদান উইলআপডেট (): টিতার পদ্ধতি বলা হয় jআপনার উপাদানটি আপডেট হতে চলেছে তার আগে ust। এই পদ্ধতিতে, আপনি কল করে আপনার উপাদান রাষ্ট্র পরিবর্তন করতে পারবেন না this.setState ।
- রেন্ডার (): আপনি যদি মিথ্যা মাধ্যমে ফিরছেন shouldCompenderUpdate () ভিতরে কোড রেন্ডার () আপনার উপাদানটি সঠিকভাবে প্রদর্শিত হচ্ছে তা নিশ্চিত করার জন্য আবার অনুরোধ করা হবে।
- উপাদান ডিডআপডেট (): উপাদানটি আপডেট হয়ে গেলে এবং রেন্ডার হয়ে গেলে এই পদ্ধতিটি চালু করা হয়। আপনি এই পদ্ধতির অভ্যন্তরে যে কোনও কোড রাখতে পারেন, যা উপাদানটি আপডেট হয়ে গেলে আপনি কার্যকর করতে চান।
গ। প্রপস পরিবর্তন পর্ব - পরে উপাদানটি ডিওমে রেন্ডার করা হয়েছে, রাষ্ট্রের পরিবর্তন ব্যতীত যখন উপাদানটির আপডেট মূল্য পরিবর্তিত হয় তখন কেবলমাত্র উপাদানটি আপডেট হবে। কার্যত এই পর্বটি আগের পর্বের মতোই কাজ করে, তবে রাষ্ট্রের পরিবর্তে, প্রপসগুলির সাথে ডিল করে। সুতরাং, এই ধাপে আপডেটিং পর্ব থেকে কেবলমাত্র একটি অতিরিক্ত পদ্ধতি রয়েছে।
ফিবোনাচি কোড সি ++
- উপাদানবিশেষগ্রহীতা (): এই পদ্ধতিটি এমন একটি যুক্তি প্রদান করে যা এতে নতুন প্রোপ মান যুক্ত করে যা উপাদানটিকে বরাদ্দ করা হবে।
আমরা আগের পর্বে যে পদ্ধতিগুলি দেখেছি তার সাথে লাইফসাইকেলের অন্যান্য পদ্ধতিগুলি একইরকম আচরণ করে।
- shouldCompenderUpdate ()
- উপাদান উইলআপডেট ()
- রেন্ডার ()
- উপাদানডিডআপডেট ()
d।আনমাউন্টিং পর্ব -এটি উপাদানগুলির জীবনচক্রের শেষ পর্যায় যেখানে উপাদানটি ডিওএম থেকে সম্পূর্ণরূপে ধ্বংস হয়ে যায় এবং সরানো হয়। এটিতে কেবল একটি পদ্ধতি রয়েছে:
- উপাদানউইলউনমাউন্ট (): এই পদ্ধতিটি চালু হওয়ার পরে আপনার উপাদানটি DOM থেকে স্থায়ীভাবে সরানো হবে।এই পদ্ধতিতে, ওয়াইOU ইভেন্ট শ্রোতাদের অপসারণ, টাইমার থামানো ইত্যাদির মতো কোনও ক্লিন-আপ সম্পর্কিত কাজ সম্পাদন করতে পারে
পুরো জীবনচক্রের চিত্রটি নীচে দেওয়া হল:
এটি আমাদের প্রতিক্রিয়া উপাদানগুলিতে ব্লগের শেষের দিকে নিয়ে আসে। আমি আশা করি এই ব্লগে আমি প্রতিক্রিয়া উপাদানগুলি কীভাবে ব্যবহার করা হয়, কীভাবে ব্যবহার করা হয় তা স্পষ্টভাবে ব্যাখ্যা করতে সক্ষম হয়েছি। আপনি আমার ব্লগটি উল্লেখ করতে পারেন , আপনি যদি ReactJS সম্পর্কে আরও জানতে চান তবে।
আপনি যদি প্রতিক্রিয়াতে প্রশিক্ষণ পেতে চান এবং নিজেরাই আকর্ষণীয় ইউআই এর বিকাশ করতে চান, তবে এটি পরীক্ষা করে দেখুন এডুরেকা, বিশ্বস্ত জুড়ে 250,000 এরও বেশি সন্তুষ্ট শিক্ষার্থীর নেটওয়ার্ক সহ একটি বিশ্বস্ত অনলাইন লার্নিং সংস্থা by
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।