রিয়াক্ট এপ্লিকেশনে আমরা ব্রাউজার স্ক্রিনে যা কিছু দেখি তার সবকিছুই রিয়াক্টের দ্বারা রেন্ডার হয়ে আসতে হয় ।
রেন্ডার এবং কমিট
এই যে স্ক্রিনে আমরা UI
দেখতে পাই তা রিয়াক্টের তিনটা প্রসেসের পর স্ক্রিনে ভিসিবল হয় । চলুন তাহলে জেনে নেই রিয়াক্টের রেন্ডারিং এর এই তিনটা প্রসেস কি আর কিভাবে কাজ করে ।
- Trigering a render:
- Rendering the component:
- Commiting to the DOM:
Trigger a render (ট্রিগারিং স্টেপ):
মূলত দুইটা করনে রিয়াক্টের render
মেথডটা কল হয় বা রেন্ডারিং ট্রিগার হয়ঃ
-
ইনিশিয়াল রেন্ডার (initial render): একদম সর্বপ্রথম যখন এপ্লিকেশন রান হয় তখন রিয়াক্ট
HTML
এর একটাroot
এলিমেন্টের ভিতর রিয়াক্টের সমস্ত কম্পোনেন্টকে রেন্ডার করে দেয় তারReact.render()
মেথডটাকে কল করার মাধ্যমে । -
যখন কোন স্টেট আপডেট হয় (Re-render when state update): প্রথমবার সমস্ত কম্পোনেন্ট
UI
তে এসে যাওয়ার পর, যখন কোন কম্পোনেন্টের ভিতরে কোন স্টেট চেঞ্জ হয় তখন রিয়াক্ট অটেমেটিক ভাবে তারrender()
মেথডকে কল করে বা রি-রেন্ডার ট্রিগার হয় ।
React render your component (রেন্ডারিং স্টেপ):
যখন রিয়াক্টের রেন্ডারিং টা ট্রিগার হয় তখন রিয়াক্ট তার কম্পোনেন্টগুলোকে কল করে। যাতে সে বুঝতে পারে কোথায় পরিবর্তনটা হয়েছে।
-
এক্ষেত্রে প্রথম রেন্ডারে রিয়াক্ট তার রুট (root) কম্পোনেন্টকে কল করে
-
পরবর্তি সময়ে রি-রেন্ডার ট্রিগার হলে যেই কম্পোনেন্ট থেকে রি-রেন্ডার ট্রিগার হয়েছে সেই কম্পোনেন্টকে কল করে এবং তার প্রথম রেন্ডারের যে
Render Tree
তার একটাsnapshot
নিয়ে রাখে এবং পরবর্তি রেন্ডারেরে একটাsnapshot
নিয়ে তার ভার্চুয়াল ডম এDiffing
এলগরিদমের মাধ্যমে কেলকুলেট করে যে কোথায় পরিবর্তন হয়েছে । তারপর সে নেক্সট স্টেপে চলে যায় কমিট করার জন্য ।
রেন্ডারিং প্রসেসটা রিকারসিভলি হয়ে থাকে, তার মানে হলো রিয়াক্ট রেন্ডারিং এ যেই কম্পোনেন্টকে কল করেছে তার ভিতর যদি নেস্টেড আরও কোন কম্পোনেন্ট থাকে সেগুলাও রি-রেন্ডার হয়
React Commits changes to the DOM (কমিটিং স্টেপ):
কমিটিং ফেজে এসে রিয়াক্ট DOM
মডিফাই করে । এক্ষেত্রে,
-
প্রথম রেন্ডারে রিয়াক্ট
DOM
এরappendChild()
কল করে সমস্তDOM Nodes
গুলোকে রুট এলিমেটে এড করে দেয় -
রি-রেন্ডারের ক্ষেত্রে রিয়াক্ট তার ভার্চুয়াল ডম এ যেই অংশটুকুর পরিবর্তন ডিটেক্ট করতে পারে শুধুমাত্র সেই অংশটুকু
DOM
এ চেঞ্জ করে দেয়
প্রথমবার রেন্ডার হয়ে যাওয়ার পর রিয়াক্ট শুধু তখনি DOM
এ চেঞ্জ করে যখন সে দেখতে পারে আগের রেন্ডার এবং পরের রেন্ডারে কোন পার্থক্য আছে। যেই সকল কম্পোনেন্টে কোন প্রকার চেঞ্জ দেখা যায়না রিয়াক্ট সেই সকল কম্পোনেন্টে হাত ই দেয়না।
সবশেষে ব্রাউজার পেইন্ট হয়ঃ
রেন্ডারিং এবং কমিট হয়ে যাওয়ার পর যখন রিয়াক্ট তার DOM
টাকে আপডেট করে ফেলে,তখন সে Updated DOM
টা ব্রাউজারকে দিয়ে দেয়। এবং ব্রাউজার তা স্ক্রিনে রি-পেইন্ট করে দেয়।