render
render
ব্রাউজারের একটি DOM নোডে JSX (“React node”) এর একটি অংশ রেন্ডার করে।
render(reactNode, domNode, callback?)
রেফারেন্স
render(reactNode, domNode, callback?)
একটি ব্রাউজার DOM এলিমেন্টের মধ্যে একটি React component দেখানোর জন্য render
কল করুন।
import { render } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);
React <App />
দেখাবে domNode
এর মধ্যে, এবং এর ভেতরকার DOM ম্যানেজ করার দায়িত্ব নিয়ে নিবে।
সম্পূর্ণভাবে React দিয়ে তৈরি একটি অ্যাপ এর রুট component এর সাথে সাধারণত এক বার render
কল থাকবে। যেই পেইজ তার বিভিন্ন অংশের জন্য React এর “sprinkles” ব্যবহার করে সেটায় যতগুলো প্রয়োজন render
কল থাকতে পারে।
প্যারামিটার
-
reactNode
: একটা React নোড যেটা আপনি দেখাতে চান। এটা সাধারণত<App />
এর মত JSX এর একটি অংশ হবে, কিন্তু আপনি চাইলেcreateElement()
দিয়ে তৈরি একটি React এলিমেন্ট, একটি স্ট্রিং, একটি সংখ্যা,null
, বাundefined
পাস করতে পারেন। -
domNode
: একটি DOM এলিমেন্ট। React এই DOM এলিমেন্টের মধ্যে আপনার পাস করাreactNode
দেখাবে। এই মুহুর্ত থেকে শুরু করে, ReactdomNode
এর ভেতরের DOM ম্যানেজ করবে এবং যখন আপনার React ট্রি বদলাবে সেই হিসেবে আপডেট করবে। -
optional
callback
: একটি ফাংশন। যদি একে পাস করা হয়, আপনার component DOM এ রাখার পর React এটাকে কল করবে।
রিটার্ন
render
সাধারণত null
রিটার্ন করে। তবে, আপনি যে reactNode
পাস করছেন সেটা যদি ক্লাস component হয়, তাহলে এটা ওই component এর একটি ইন্সট্যান্স রিটার্ন করবে।
সতর্কতা
-
React 18 এ,
render
কে প্রতিস্থাপন করেছেcreateRoot
. দয়া করে React 18 এবং তার পরবর্তী ভার্সনগুলোর জন্যcreateRoot
ব্যবহার করবেন। -
আপনি প্রথম বার
render
কল করার সময়, ReactdomNode
এর ভেতরে React component রেন্ডার করার আগে এর ভেতরকার সকল HTML কনটেন্ট মুছে ফেলবে। যদি আপনারdomNode
এ সার্ভারের React দ্বারা তৈরি বা বিল্ডের সময় তৈরি HTML থাকে, বরংhydrate()
ব্যবহার করুন, যা আগে থেকে থাকা HTML এর সাথে ইভেন্ট হ্যান্ডলার যুক্ত করে দেয়। -
আপনি যদি একই
domNode
এ একাধিক বারrender
কল করেন, React আপনার পাস করে সর্বশেষ JSX এর প্রতিফলন দেখানোর জন্য DOM আপডেট করে দেবে। React সিদ্ধান্ত নিবে যে DOM এর কোন কোন অংশ পুনরায় ব্যবহার করা জাবর এবং কোনগুলো আবার আগের বার রেন্ডার হওয়া ট্রি এর সাথে “মিলানোর মাধ্যমে” পুনরায় তৈরি করা দরকার। একইdomNode
এ একাধিক বারrender
কল করা রুট component এset
function কল করার মতঃ React avoids অপ্রয়োজনীয় DOM আপডেট এড়িয়ে চলে। -
আপনার অ্যাপ যদি সম্পূর্ণভাবে React দিয়ে তৈরি হয়ে থাকে, এতে
render
কল এক বারই থাকার কথা (আপনি যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন, সেটা আপনার জন্য এই কল করে দিতে পারে)। যখন আপনি JSX এর একটি অংশ এমন জায়গায় রেন্ডার করতে চান যেটা আপনার component এর চাইল্ড না (যেমন, মোডাল বা টুলটিপ), সেক্ষেত্রেrender
এর জায়গায়createPortal
ব্যবহার করুন।
ব্যবহার
একটি ব্রাউজার DOM নোডের ভেতর একটি React component দেখানোর জন্য render
কল করুন।
import { render } from 'react-dom';
import App from './App.js';
render(<App />, document.getElementById('root'));
রুট component রেন্ডার করা
সম্পূর্ণভাবে React দিয়ে তৈরি এমন অ্যাপের জন্য, আপনি সাধারণত এটা startup এর সময় এক বার করবেন—“root” component রেন্ডার করবার জন্য।
import './styles.css'; import { render } from 'react-dom'; import App from './App.js'; render(<App />, document.getElementById('root'));
সাধারণত আপনার render
আবার কল দেবার বা আরো জায়গায় কল দেবার প্রয়োজন হবার কথা না। এই জায়গা থেকে, React আপনার অ্যাপ্লিকেশনের DOM ম্যানেজ করবে। UI আপডেটের জন্য, আপনার component গুলো state ব্যবহার করবে।
একাধিক রুট রেন্ডার করা
যদি আপনার পেইজ সম্পূর্ণ রূপে React দিয়ে তৈরি না হয়ে থাকে, React ম্যানেজ করে এরকম সকল উচ্চ স্তরের UI এর জন্য render
কল করুন।
import './styles.css'; import { render } from 'react-dom'; import { Comments, Navigation } from './Components.js'; render( <Navigation />, document.getElementById('navigation') ); render( <Comments />, document.getElementById('comments') );
আপনি unmountComponentAtNode()
ব্যবহার করে রেন্ডার হওয়া ট্রি আপডেট করতে পারেন।
Render হওয়া ট্রি এর আপডেট
আপনি একই DOM নোডে একাধিক বার render
কল করতে পারেন। As long as the component tree structure matches up with what was previously rendered, React will preserve the state. Notice how you can type in the input, which means that the updates from repeated render
calls every second are not destructive:
import { render } from 'react-dom'; import './styles.css'; import App from './App.js'; let i = 0; setInterval(() => { render( <App counter={i} />, document.getElementById('root') ); i++; }, 1000);
render
সাধারণত একাধিকবার কল দেওয়া হয় না। সাধারণত, আপনি তা না করে আপনার component এর মধ্যে update state করবেন।