ReactJS-এ কম্পোনেন্ট দুই ধরনের হতে পারে: Functional Components এবং Class Components। যদিও উভয়ই React অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়, তাদের মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। নিচে আমরা উভয়ের বৈশিষ্ট্য এবং পার্থক্য বিশদভাবে আলোচনা করবো।
Functional Components
Functional Components হল সাধারণ JavaScript ফাংশন, যা UI রেন্ডার করার জন্য React এর মাধ্যমে ব্যবহৃত হয়। এর মধ্যে কোনো স্টেট (State) বা লাইফসাইকেল মেথড ব্যবহার করার সুযোগ ছিল না, তবে React Hooks এর আগমনের পর Functional Components-এ স্টেট এবং লাইফসাইকেল ফিচার যোগ করা সম্ভব হয়েছে।
বৈশিষ্ট্য:
- JavaScript ফাংশন: Functional Components সাধারণ JavaScript ফাংশন হিসেবে তৈরি হয়।
- স্টেট এবং লাইফসাইকেল হুক: React Hooks ব্যবহার করে Functional Components-এ স্টেট এবং লাইফসাইকেল কার্যক্রম যোগ করা যায়।
- পাঠযোগ্য এবং কমপ্যাক্ট কোড: Functional Components-এ কোড সাধারণত কমপ্যাক্ট এবং পড়তে সহজ হয়।
উদাহরণ:
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
};
export default MyComponent;
এখানে useState হুক ব্যবহার করে স্টেট পরিচালনা করা হচ্ছে, এবং UI রেন্ডার করা হচ্ছে। এটি একটি Functional Component।
Class Components
Class Components React-এর পূর্ববর্তী সংস্করণে ব্যবহৃত হতো। এটি ES6 ক্লাস ব্যবহার করে তৈরি হয় এবং স্টেট এবং লাইফসাইকেল মেথডগুলো সরাসরি অন্তর্ভুক্ত করতে পারে।
বৈশিষ্ট্য:
- ES6 ক্লাস: Class Components ES6 ক্লাসের মাধ্যমে তৈরি হয়।
- স্টেট এবং লাইফসাইকেল মেথড: Class Components-এ স্টেট এবং লাইফসাইকেল মেথড যেমন
componentDidMount,componentDidUpdateএবংcomponentWillUnmountব্যবহার করা যায়। - কিছুটা বড় কোড: Class Components সাধারণত Functional Components এর তুলনায় কিছুটা বড় হয় এবং বোঝা কঠিন হতে পারে।
উদাহরণ:
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increaseCount}>Increase</button>
</div>
);
}
}
export default MyComponent;
এখানে, state ব্যবহৃত হয়েছে এবং increaseCount মেথড দিয়ে স্টেট আপডেট করা হচ্ছে। এটি একটি Class Component।
Functional এবং Class Components এর মধ্যে প্রধান পার্থক্য
| বৈশিষ্ট্য | Functional Components | Class Components |
|---|---|---|
| ধরন | সাধারণ JavaScript ফাংশন | ES6 ক্লাস (Class) |
| স্টেট (State) | React Hooks (যেমন useState, useEffect) ব্যবহার করে | this.state এবং this.setState ব্যবহার করে |
| লাইফসাইকেল মেথড (Lifecycle Methods) | React Hooks ব্যবহার করে (যেমন useEffect) | componentDidMount, componentDidUpdate ইত্যাদি মেথড ব্যবহার করে |
| পাঠযোগ্যতা | সহজ এবং কমপ্যাক্ট কোড | কিছুটা জটিল কোড এবং বড় ফাংশন |
| পারফরম্যান্স | একটু বেশি ফাস্ট এবং কম রিসোর্স ব্যবহার করে | কিছুটা বেশি রিসোর্স নেয় (বিশেষ করে বড় কম্পোনেন্টের ক্ষেত্রে) |
| React 16.8 এর পর সুবিধা | React Hooks এর মাধ্যমে স্টেট এবং লাইফসাইকেল পরিচালনা সহজ হয়েছে | React Hooks-এ আগ্রহ কমেছে, তবে পুরানো কোডে এখনও ব্যবহৃত হয় |
Functional Components কেন বেশি জনপ্রিয়?
React 16.8-এ React Hooks এর আগমনের পর থেকে Functional Components অনেক বেশি জনপ্রিয় হয়ে উঠেছে। Hooks, যেমন useState, useEffect, ইত্যাদি, Functional Components-এ স্টেট এবং লাইফসাইকেল ফিচার যোগ করা সহজ করেছে, যা আগে শুধুমাত্র Class Components-এ সম্ভব ছিল। এতে কোড আরও সোজা এবং কমপ্যাক্ট হয়।
তাছাড়া, Functional Components ছোট এবং পরিষ্কার হওয়ায় এগুলোকে মেইন্টেন করা সহজ হয়, এবং ডেভেলপাররা সহজেই কমপোনেন্টগুলির মধ্যে পারস্পরিক সম্পর্ক বুঝতে পারেন।
সারাংশ
- Functional Components সাধারণ JavaScript ফাংশন হিসেবে তৈরি হয় এবং
React Hooksব্যবহার করে স্টেট এবং লাইফসাইকেল ম্যানেজমেন্ট করা যায়। এগুলি ছোট এবং পরিষ্কার কোড লেখার জন্য উপযুক্ত। - Class Components ES6 ক্লাস ব্যবহার করে তৈরি হয় এবং স্টেট এবং লাইফসাইকেল মেথডের জন্য অনেক বেশি কোড লিখতে হয়। এগুলি কিছুটা জটিল হতে পারে।
React-এ আধুনিক ডেভেলপমেন্টে Functional Components অধিক জনপ্রিয় এবং অধিক ব্যবহৃত হয়, তবে পুরনো অ্যাপ্লিকেশনে Class Components এখনও পাওয়া যায়।
Read more
