রেন্ডারিং Elements

Element হল React এপ্লিকেশনের সবথেকে ছোট বিল্ডিং ব্লক।

একটি element আপনি স্ক্রিনে কী দেখতে চান তা বর্ণনা করেঃ

const element = <h1>Hello, World</h1>;

React element গুলো সাধারণ অবজেক্ট, এবং তৈরি করতে সহজ, যা ব্রাউজারের DOM element এর মত নয়। React element এর সাথে সমকক্ষতা রেখে DOM আপডেট করে React DOM।

বিঃদ্রঃ

কেউ হয়ত বহুল পরিচিত “কম্পোনেন্ট” এর সাথে element গুলিয়ে ফেলতে পারে। পরবর্তী অনুচ্ছেদ এ আমরা কম্পোনেন্ট পরিচয় করিয়ে দেব । কম্পোনেন্ট “তৈরি” হয় element দিয়ে, এবং এগিয়ে যাওয়ার আগে আমরা আপনাকে এই বিভাগটি পড়তে উৎসাহিত করি।

DOM এ একটি element রেন্ডার করা

ধরা যাক আপনার HTML ফাইলে কোথাও একটি <div> আছে।

<div id="root"></div>

আমরা এটি কে “root” DOM নোড বলে থাকি কারণ এটির ভেতরের সবকিছু React DOM দ্বারা নিয়ন্ত্রিত হবে।

শুধু React দ্বারা নির্মিত এপ্লিকেশন গুলোতে সাধারণত একটিমাত্র রুট DOM নোড থাকে। আপনি যদি কোন বিদ্যমান এপ্লিকেশনে React একীভূত করেন, তাহলে আপনি যত গুলা খুশী ভিন্ন রুট DOM নোড রাখতে পারেন।

একটি React element রুট DOM নোড এ রেন্ডার করতে, উভয়কে ReactDOM.render() এ pass করতে হবেঃ

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

CodePen এ দেখুন

এটি পেজ এ “Hello, world” প্রদর্শন করে।

রেন্ডারকৃত element আপডেট করা

React element গুলা immutable। একবার element বানানো হয়ে গেলে, আপনি এর children অথবা attributes পরিবর্তন করতে পারবেন না। একটি element হল সিনেমার একটি একক ফ্রেমের মতঃ এটি UI এর একটি নির্দিষ্ট সময়কে উপস্থাপিত করে।

এখন পর্যন্ত আমাদের অর্জিত জ্ঞান দিয়ে, UI আপডেট করার একমাত্র উপায় হল নতুন element তৈরি করা, এবং সেটিকে ReactDOM.render() এ pass করা।

এই টিক ঘড়ির উদহারণটি বিবেচনা করুনঃ

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

CodePen এ দেখুন

এটি প্রতি সেকেন্ডে setInterval() কলব্যাক থেকে ReactDOM.render() কল করে।

বিঃদ্রঃ

চর্চার খাতিরে, অধিকাংশ React এপ্লিকেশন শুধু একবার ReactDOM.render() কল করে। পরবর্তী বিভাগে আমরা শিখব এই জাতীয় কোড কীভাবে stateful কম্পোনেন্ট এ encapsulated হয়।

আমরা আপনাকে পরামর্শ দিই যে আপনি বিষয়গুলি এড়িয়ে যাবেন না কারণ তারা একে অপরের উপর নির্ভরশীল।

React শুধু প্রয়োজনীয় জিনিসগুলো আপডেট করে

React DOM element এবং তার children দের আগেরটির সাথে তুলনা করে, এবং DOM কে কাঙ্ক্ষিত অবস্থায় আনতে শুধু প্রয়োজনীয় DOM আপডেট গুলো প্রয়োগ করে.

আপনি ব্রাউজার সরঞ্জামগুলির সাথে সর্বশেষ উদাহরণটি পরীক্ষা করে যাচাই করতে পারেনঃ

DOM inspector showing granular updates

যদিও আমরা প্রতিটি টিকের উপরে পুরো UI ট্রি বর্ণনা করে এমন একটি উপাদান তৈরি করি, React DOM দ্বারা কেবলমাত্র যেসব টেক্সট নোডের বিষয়বস্তু পরিবর্তিত হয়েছে তা আপডেট হয় ।

আমাদের অভিজ্ঞতায়, সময়ের সাথে সাথে কীভাবে এটি পরিবর্তন করা যায় চিন্তা করার থেকে, বরং কোনও নির্দিষ্ট মুহুর্তে UI দেখতে কেমন হবে চিন্তা করে, অনেক বাগ পরিহার করা যায়।