Reactive Accelerator
React Js
Going Deep into React: Adding Interactivity
2.4 - How Rendering Works

রিয়াক্ট এপ্লিকেশনে আমরা ব্রাউজার স্ক্রিনে যা কিছু দেখি তার সবকিছুই রিয়াক্টের দ্বারা রেন্ডার হয়ে আসতে হয় ।

রেন্ডার এবং কমিট

এই যে স্ক্রিনে আমরা UI দেখতে পাই তা রিয়াক্টের তিনটা প্রসেসের পর স্ক্রিনে ভিসিবল হয় । চলুন তাহলে জেনে নেই রিয়াক্টের রেন্ডারিং এর এই তিনটা প্রসেস কি আর কিভাবে কাজ করে ।

  1. Trigering a render:
  2. Rendering the component:
  3. Commiting to the DOM:

Trigger a render (ট্রিগারিং স্টেপ):

মূলত দুইটা করনে রিয়াক্টের render মেথডটা কল হয় বা রেন্ডারিং ট্রিগার হয়ঃ

  1. ইনিশিয়াল রেন্ডার (initial render): একদম সর্বপ্রথম যখন এপ্লিকেশন রান হয় তখন রিয়াক্ট HTML এর একটা root এলিমেন্টের ভিতর রিয়াক্টের সমস্ত কম্পোনেন্টকে রেন্ডার করে দেয় তার React.render() মেথডটাকে কল করার মাধ্যমে ।

  2. যখন কোন স্টেট আপডেট হয় (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টা ব্রাউজারকে দিয়ে দেয়। এবং ব্রাউজার তা স্ক্রিনে রি-পেইন্ট করে দেয়।