Riot.js-এ Lifecycle Events ব্যবহৃত হয় কম্পোনেন্টগুলির জীবনচক্রের বিভিন্ন পর্যায়ে কিছু কার্যকলাপ সম্পাদন করার জন্য। এই ইভেন্টগুলির মাধ্যমে আপনি কম্পোনেন্টের মাউন্টিং, আপডেটিং এবং আনমাউন্টিং অবস্থায় নির্দিষ্ট কোড চালাতে পারেন।
Riot.js-এর Lifecycle Methods বা ইভেন্টগুলি সাধারণত কম্পোনেন্টের মাউন্ট হওয়া, ডেটা আপডেট হওয়া, এবং কম্পোনেন্টটি DOM থেকে সরানোর সময় কল করা হয়।
Riot.js Lifecycle Events
Riot.js এ কয়েকটি lifecycle events বা মেথড রয়েছে যা কম্পোনেন্টের জীবনচক্রের বিভিন্ন সময়ে কাজ করে। প্রধান lifecycle methods হল:
onMounted(): যখন কম্পোনেন্ট প্রথমবার DOM এ মাউন্ট হয়, তখন এই মেথডটি কল হয়।onUpdated(): যখন কম্পোনেন্টের ডেটা বা স্টেট পরিবর্তিত হয় এবং কম্পোনেন্ট পুনরায় রেন্ডার হয়, তখন এই মেথডটি কল হয়।onBeforeUnmount(): যখন কম্পোনেন্টটি DOM থেকে আনমাউন্ট হওয়ার আগে কল হয়।onUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর পর কল হয়।
১. onMounted() - কম্পোনেন্ট মাউন্ট হওয়ার পর
onMounted() মেথডটি তখন কল হয় যখন কম্পোনেন্টটি প্রথমবার DOM এ মাউন্ট হয়। এটি এক ধরনের initialization মেথড যা কম্পোনেন্টের ডেটা সেট করতে বা প্রথম সেটআপ করতে ব্যবহৃত হয়।
উদাহরণ:
<!-- OnMountedExample.riot -->
<on-mounted-example>
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = "Hello, Riot.js!";
console.log('Component Mounted!');
}
}
</script>
</on-mounted-example>
এখানে, onMounted() ফাংশনটি কম্পোনেন্ট মাউন্ট হওয়ার পরে কল হবে এবং এটি message প্রপার্টি সেট করবে।
২. onUpdated() - কম্পোনেন্ট আপডেট হওয়ার পর
onUpdated() মেথডটি তখন কল হয় যখন কম্পোনেন্টের ডেটা পরিবর্তিত হয় এবং কম্পোনেন্ট পুনরায় রেন্ডার হয়। এটি সাধারণত ডেটা পরিবর্তন হলে বা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে কোনো পরিবর্তন আসলে কল করা হয়।
উদাহরণ:
<!-- OnUpdatedExample.riot -->
<on-updated-example>
<input type="text" oninput={updateMessage} placeholder="Type something">
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = '';
},
updateMessage(e) {
this.message = e.target.value;
},
onUpdated() {
console.log('Component Updated!');
}
}
</script>
</on-updated-example>
এখানে, onUpdated() ফাংশনটি তখন কল হবে যখন ইনপুট ফিল্ডে কিছু টাইপ করার মাধ্যমে message পরিবর্তিত হবে। এটি ডেটা পরিবর্তন বা ইউজার ইন্টারঅ্যাকশন পরবর্তী সময়ে কার্যকর হবে।
৩. onBeforeUnmount() - কম্পোনেন্ট আনমাউন্ট হওয়ার আগে
onBeforeUnmount() মেথডটি তখন কল হয় যখন কম্পোনেন্টটি DOM থেকে সরানোর আগে। এটি সাধারণত কম্পোনেন্টের রিসোর্স বা ইভেন্ট লিসেনার পরিষ্কার করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<!-- OnBeforeUnmountExample.riot -->
<on-before-unmount-example>
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = 'This component will unmount soon.';
},
onBeforeUnmount() {
console.log('Component will be removed soon!');
}
}
</script>
</on-before-unmount-example>
এখানে, onBeforeUnmount() ফাংশনটি তখন কল হবে যখন কম্পোনেন্টটি DOM থেকে সরানোর আগে। এটি পরিষ্কার করার জন্য বা টেমপ্লেটের আগে কোন রিসোর্স মুক্ত করার জন্য ব্যবহার করা হয়।
৪. onUnmount() - কম্পোনেন্ট আনমাউন্ট হওয়ার পর
onUnmount() মেথডটি তখন কল হয় যখন কম্পোনেন্টটি DOM থেকে সরানো হয়। এটি সাধারণত কম্পোনেন্টের পরবর্তী ব্যবহারের জন্য কিছু কোড নিষ্ক্রিয় করতে বা পরিষ্কার করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<!-- OnUnmountExample.riot -->
<on-unmount-example>
<p>{message}</p>
<script>
export default {
onMounted() {
this.message = 'This component will be removed shortly.';
},
onUnmount() {
console.log('Component has been removed!');
}
}
</script>
</on-unmount-example>
এখানে, onUnmount() ফাংশনটি কল হবে যখন কম্পোনেন্টটি DOM থেকে সরানো হবে। এটি কোডের ক্লিনআপের জন্য ব্যবহার করা যেতে পারে, যেমন ইভেন্ট লিসেনার বা টাইমআউট পরিষ্কার করা।
সারাংশ
onMounted(): কম্পোনেন্ট প্রথমবার মাউন্ট হলে কল হয়, সাধারণত ডেটা ইনিশিয়ালাইজ করতে।onUpdated(): কম্পোনেন্টের ডেটা বা স্টেট পরিবর্তন হলে এবং পুনরায় রেন্ডার হলে কল হয়।onBeforeUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর আগে কল হয়, যেখানে আপনি রিসোর্স বা ইভেন্ট লিসেনার পরিষ্কার করতে পারেন।onUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর পর কল হয়, যেখানে আপনি ক্লিনআপ কার্যকর করতে পারেন।
এই Lifecycle Events Riot.js কম্পোনেন্টের আচরণ এবং পারফরম্যান্স নিয়ন্ত্রণ করতে সহায়ক। আপনি এসব ইভেন্ট ব্যবহার করে ডেটা ইনিশিয়ালাইজেশন, রিসোর্স ম্যানেজমেন্ট, এবং ক্লিনআপ কার্যকলাপ পরিচালনা করতে পারবেন।
Read more
