২য় দিন: React কীভাবে UI আপডেট করে
গতকাল আমি শিখেছি React কী করে। আজ আমি শিখলাম এটি কীভাবে করে।
আমি ভাবতাম React কীভাবে ঠিকভাবে জানে যে UI-তে কী পরিবর্তন করতে হবে। আপনি যদি একটি অনুচ্ছেদের একটি শব্দ পরিবর্তন করেন, তবে কি React পুরো পেজটি পুনরায় তৈরি করে? না। এটি দ্রুত থাকার জন্য একটি বুদ্ধিদীপ্ত প্রক্রিয়া ব্যবহার করে।
নিচে React আপডেট সাইকেলের বিস্তারিত আলোচনা করা হলো।
Reconciliation এবং Diffing
Reconciliation হলো কৌশল। Diffing হলো প্রকৃত পদ্ধতি। React নতুন Virtual DOM ট্রি-এর সাথে পুরনোটির তুলনা করে।
দুটি ট্রি তুলনা করা কম্পিউটারের জন্য কঠিন। একটি সাধারণ অ্যালগরিদম অনেক ধীরগতির। React দুটি অনুমানের মাধ্যমে দ্রুত কাজ করে:
- যদি একটি এলিমেন্টের টাইপ পরিবর্তিত হয়, তবে React পুরনো ট্রিটি ধ্বংস করে একটি নতুন ট্রি তৈরি করে।
- যদি টাইপ একই থাকে, তবে React শুধুমাত্র পরিবর্তিত অ্যাট্রিবিউটগুলো আপডেট করে।
এটি React-কে O(n) সময়ে চলতে সাহায্য করে। এর ফলে আপডেটগুলো তাৎক্ষণিক মনে হয়।
দুটি ফেজ (Phases)
React তার কাজকে দুটি আলাদা ধাপে বিভক্ত করে:
১. Render Phase এটি হলো পরিকল্পনার ধাপ। React আপনার কম্পোনেন্টগুলোকে কল করে এবং পরিবর্তনগুলো গণনা করে। এখানে এটি Real DOM-এ কোনো পরিবর্তন করে না। এটিকে একজন স্থপতির ব্লুপ্রিন্ট আঁকার সাথে তুলনা করতে পারেন।
২. Commit Phase এটি হলো নির্মাণের ধাপ। React গণনা করা পরিবর্তনগুলো Real DOM-এ প্রয়োগ করে। এই অংশটি synchronous। একবার শুরু হলে, কাজ শেষ না হওয়া পর্যন্ত এটি থামে না।
গুরুত্বপূর্ণ: React DOM আপডেট করে, কিন্তু ব্রাউজার পিক্সেলগুলো পেইন্ট (paint) করে। React গঠন (structure) নিয়ন্ত্রণ করে, আর ব্রাউজার ভিজ্যুয়াল রেন্ডারিং নিয়ন্ত্রণ করে।
React Fiber
React 16-এর আগে, রেন্ডারিং ছিল synchronous। যদি একটি রেন্ডার হতে দীর্ঘ সময় লাগত, তবে ব্রাউজার ফ্রিজ হয়ে যেত। আপনি স্ক্রল করতে বা টাইপ করতে পারতেন না।
Fiber এটি পরিবর্তন করেছে। Fiber হলো সেই ইঞ্জিন যা Render Phase পরিচালনা করে। এটি React-কে যা করতে সাহায্য করে:
- কাজ সাময়িকভাবে থামিয়ে রাখা এবং পরে পুনরায় শুরু করা।
- ব্যাকগ্রাউন্ড ডেটার চেয়ে ইউজারের টাইপিংয়ের মতো জরুরি আপডেটগুলোকে অগ্রাধিকার দেওয়া।
- কাজকে ছোট ছোট অংশে ভাগ করা।
Virtual DOM হলো ডেটা স্ট্রাকচার। Fiber হলো সেই অ্যালগরিদম যা সেই ডেটার ওপর কাজ করে।
ফ্লো-এর সারসংক্ষেপ:
• State পরিবর্তিত হয়। • Render Phase: React Diffing-এর মাধ্যমে পরিবর্তনের পরিকল্পনা করে। • Commit Phase: React Real DOM আপডেট করে। • Browser: Layout, Paint, এবং Composite। • স্ক্রিনে পিক্সেল দৃশ্যমান হয়।