জীবনচক্র প্রতিক্রিয়া:একটি সংক্ষিপ্ত বিবরণ

প্রতিক্রিয়ায় একটি জীবনচক্রকে তিনটি ভিন্ন পর্যায়ে চিন্তা করা যেতে পারে:মাউন্ট করা, আপডেট করা এবং আনমাউন্ট করা। মাউন্টিং ঘটে যখন প্রতিক্রিয়া উপাদানটি DOM (ডকুমেন্ট অবজেক্ট মডেল) এ রেন্ডার করে। যখন সেই উপাদানটিতে পরিবর্তন করা হয়, তখন এটি আপডেট করার পর্যায়ে প্রবেশ করে।

জীবনচক্রের আপডেট পর্বে, নতুন তথ্য পরীক্ষা করতে এবং সেই উপাদানটিকে পুনরায় রেন্ডার করার জন্য অভ্যন্তরীণ পদ্ধতির একটি সিরিজ চালানো হয়। DOM থেকে একটি উপাদান সরানো হলে আনমাউন্ট করা হয়।

এই নিবন্ধের কোর্সটি জীবনচক্রের বিস্তৃত প্রভাব এবং সাধারণভাবে ব্যবহৃত কিছু পদ্ধতি নিয়ে আলোচনা করে। আরও জীবনচক্র পদ্ধতি রয়েছে যা ব্যবহার করা যেতে পারে যা এখানে আলোচনা করা হবে না। অন্যান্য জীবনচক্র পদ্ধতি সম্পর্কে আরও তথ্যের জন্য, এই ভূমিকা পড়ুন।

প্রতিক্রিয়া জীবনচক্র কি?

যখন একটি উপাদান DOM-এ লোড করা হয়, তখন এটি তিনটি পর্যায় বা জীবনচক্রের প্রথমটিতে প্রবেশ করে। এই প্রথম পর্বটিকে মাউন্টিং বলা হয়। এই পর্যায়ে, উপাদানটি মূলত সংজ্ঞায়িত হিসাবে রেন্ডার করা হয়। এটি এখন ব্যবহারকারীর সাথে যোগাযোগ করতে এবং দ্বিতীয় পর্বে প্রবেশের জন্য প্রস্তুত।

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

আপডেট পর্বে, পরিবর্তনগুলি প্রদর্শন করতে প্রতিক্রিয়া উপাদানটিকে পুনরায় রেন্ডার করবে। আপডেট ফেজ ট্রিগার করার জন্য অবস্থা পরিবর্তনের উপরে আমাদের উদাহরণে, setState() পদ্ধতিটিকে প্রাথমিক অবস্থা পরিবর্তন করতে এবং পুনরায় রেন্ডারিং প্রক্রিয়া শুরু করতে বলা হবে। সেটস্টেট সম্পর্কে আরও জানতে, এই পরিচায়ক নিবন্ধটি পড়ুন।

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

সাধারণ জীবনচক্র পদ্ধতি

এখন যেহেতু আমরা একটি প্রতিক্রিয়া উপাদানের জীবনচক্রের ক্রমটি অতিক্রম করেছি, আসুন কিছু সাধারণ জীবনচক্র পদ্ধতি দেখি। জীবনচক্র পদ্ধতি হল প্রতিক্রিয়া পদ্ধতি যা বিভিন্ন জীবনচক্র পর্যায়ে বলা হয়। তাদের কিছু প্রয়োজন যখন কিছু ঐচ্ছিক. আমরা প্রয়োজনীয় এবং সাধারণত ব্যবহৃত ঐচ্ছিক পদ্ধতিগুলি দেখতে যাচ্ছি৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

মাউন্ট করা হচ্ছে

একটি ক্লাস কম্পোনেন্ট মাউন্ট করার সময়, প্রথম সাধারণভাবে ব্যবহৃত ঐচ্ছিক পদ্ধতি হল constructor() পদ্ধতি এটি এখানে কনস্ট্রাক্টর পদ্ধতিতে যে উপাদানটির প্রাথমিক অবস্থা সরাসরি ঘোষণা করা যেতে পারে।

class App extends React.Component {
  constructor(props) {
    super(props);
  this.state= {
      currentUser : " "
    }

  }
}

এই উদাহরণে, আমরা বর্তমান ব্যবহারকারীর জন্য একটি অবজেক্ট হিসাবে একটি প্রাথমিক অবস্থা সেট করছি। constructor() পদ্ধতির জন্য বয়লারপ্লেট super() প্রয়োজন পদ্ধতি বেস কনস্ট্রাক্টর super() সম্পর্কে আরও জানতে , আমাদের সেটস্টেট গাইড পড়ুন।

আমাদের উদ্দেশ্যে, যখন এই উপাদানটি মাউন্ট করা হয়, তখন আমরা ধরে নেব যে কেউ এখনও লগ ইন করেনি। একটি ব্যবহারকারী লগ ইন করার জন্য, আমাদের একটি লগইন ফর্ম প্রয়োজন. এটি আমাদের প্রথম প্রয়োজনীয় পদ্ধতিতে নিয়ে আসে, render() .

একটি উপাদান মাউন্ট করার জন্য একটি প্রয়োজনীয় পদ্ধতি হল render() পদ্ধতি ক্লাস কম্পোনেন্ট তার প্রারম্ভিক স্টেট সেট দিয়ে তৈরি হওয়ার পর, আমরা অন্য কম্পোনেন্ট বা এইচটিএমএল রেন্ডার করতে পারি।

render(){
    return (
     <LoginForm />
    )
  }

render() এর সিনট্যাক্স এবং এর রিটার্ন স্টেটমেন্ট অন্যান্য পদ্ধতির থেকে কিছুটা আলাদা। লক্ষ্য করুন আমরা ফেরার পরে বন্ধনী ব্যবহার করি এবং কোঁকড়া বন্ধনী নয়। এখানে রিটার্ন স্টেটমেন্টে, আমরা LoginForm কম্পোনেন্ট রেন্ডার করছি।

যখন একজন ব্যবহারকারী লগ ইন করেন, তখন আমাদের কাছে শংসাপত্রের অ্যাক্সেস থাকবে। একটি কার্যকরী অ্যাপ্লিকেশানে, একটি লগ ইনের জন্য একটি সার্ভারের সাথে মিলে যাওয়া শংসাপত্রগুলি পুনরুদ্ধার করার জন্য একটি আনার অনুরোধ প্রয়োজন৷ জীবনচক্রের এই পরিচায়ক নিবন্ধের পরিপ্রেক্ষিতে, আমরা সরাসরি রাষ্ট্র নির্ধারণ করব।

এই সহজ উদাহরণে, আমরা একজন ব্যবহারকারী, জন আছে. সে তার পাসওয়ার্ড লিখে লগইন বোতামে চাপ দেয়। এটি সার্ভারে একটি আনার অনুরোধ পাঠায় এবং সার্ভার জন এর শংসাপত্রের সাথে সাড়া দেয়। এখন যেহেতু জন লগ ইন করেছেন, আমরা চাই যতক্ষণ না সে লগ আউট করার সিদ্ধান্ত নেয় ততক্ষণ সে লগ ইন করে থাকুক।

এটি করার জন্য, আমরা আরেকটি বেশ সাধারণ ঐচ্ছিক পদ্ধতি ব্যবহার করতে পারি, componentWillMount() . যদি এই লাইফসাইকেল পদ্ধতিটিকে বলা হয়, তবে উপাদানটি রেন্ডার হওয়ার পরে এটি কার্যকর হবে। এটি আমাদের নতুন রাষ্ট্র সেট করার জন্য একটি ভাল জায়গা।

componentWillMount() {
    this.setState({
     currentUser: "John"
    })
  }

এখন, কম্পোনেন্ট রেন্ডার করার পরে এবং মাউন্ট করার আগে, কম্পোনেন্টের অবস্থা জন এর বর্তমান ব্যবহারকারীর সাথে সেট করা হয়। এমনকি যদি পৃষ্ঠাটি রিফ্রেশ করা হয়, তবে রাজ্যটি জন এর সাথে সেট করা হবে, তাই আমাদের ব্যবহারকারী লগ ইন থাকবে।

seState() ব্যবহার করে পদ্ধতিটি আমাদের জীবনচক্রের আপডেট পর্যায়ে নিয়ে আসে। যখন setState() বলা হয়, এটি প্রতিক্রিয়ার সংকেত দেয় যে উপাদানটিতে একটি পরিবর্তন করা হয়েছে। প্রতিক্রিয়া এখন ব্যবহারকারীকে করা কোনো পরিবর্তন দেখাতে উপাদানটিকে পুনরায় রেন্ডার করবে। আমাদের ক্ষেত্রে, এটি দেখাবে যে জন লগ ইন করেছেন৷

আপডেট করা হচ্ছে

জীবনচক্রের আপডেট পর্যায়ে বেশ কয়েকটি ঐচ্ছিক জীবনচক্র পদ্ধতি রয়েছে যা এই ভূমিকার সুযোগের বাইরে। আমাদের উদ্দেশ্যে বলাই যথেষ্ট যে যখন কোনো পরিবর্তন শনাক্ত করা হয় (সাধারণত setState-এর সাথে), তখন React প্রয়োজনীয় render() কে কল করবে আবার পদ্ধতি। তারপরে করা পরিবর্তনগুলি প্রতিফলিত করতে উপাদানটি পুনরায় রেন্ডার হবে৷

আনমাউন্ট করা হচ্ছে

একটি উপাদানের জীবনচক্রের চূড়ান্ত পর্যায়টিকে আনমাউন্টিং বলা হয়। এখানেই DOM থেকে একটি উপাদান সরানো হয়েছে। যদিও প্রয়োজন নেই, এটি একটি কম্পোনেন্ট ভারী অ্যাপকে আরও দক্ষতার সাথে কাজ করতে সাহায্য করে।

আনমাউন্ট করার শুধুমাত্র একটি ঐচ্ছিক পদ্ধতি আছে, componentWillUnmount() . আমাদের ব্যবহারকারী, জন, এখন লগ আউট করতে চায়। যখন তিনি লগআউট বোতামে ক্লিক করেন, আমরা componentWillUnmount() ব্যবহার করতে পারি DOM থেকে তার ব্যবহারকারী প্রোফাইল সরাতে।

এই উদাহরণটি কিছুটা বানোয়াট, তবে জীবনচক্রের প্রতিটি পর্যায়ে কী ঘটছে তা স্পষ্টভাবে দেখায়।

class UserContainer extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     currentUser: " "
   }
 }
 componentWillMount() {
   this.setState({
     currentUser: "John"
   })
 }
 
 logout = () => {
  this.setState({
    currentUser: " "
  })
 }

 
 render() {
  if this.state.currentUser === "John" {
  return (
     <UserProfile />
      <button type="button" onclick={this.logout}>Logout</button>
    )

  } else {
    return(
     <button type="button>">Login</button>
    )
  }
 }
}

class UserProfile extends React.Component {
  componentWillUnmount() {
    alert("Logged Out")
  }
  render() {
   return (
    <h1>Welcome back, John!</h1>
   )
  }
}

আমাদের দুটি উপাদান আছে। প্রথমটি হল UserContainer এবং এটি সহজভাবে UserProfile কম্পোনেন্ট ধারণ করে। ব্যবহারকারীর প্রোফাইলে ব্যবহারকারীর তথ্য রয়েছে।

UserContainer-এ, আমরা আমাদের উপাদান তৈরি করি এবং আগের মতো প্রাথমিক অবস্থা সেট করি। উপাদানটি খুব সংক্ষিপ্তভাবে একটি লগইন বোতাম দিয়ে রেন্ডার করে। আমরা কম্পোনেন্ট মাউন্ট করার ঠিক আগে, আমরা জন লগ ইন করি। এর ফলে React কম্পোনেন্ট আপডেট করে এবং জন এর শংসাপত্রের সাথে পুনরায় রেন্ডার করে।

এখন যেহেতু জন লগ ইন করেছেন, আমরা UserProfile কম্পোনেন্ট রেন্ডার করি। এতে জন এর সমস্ত ব্যবহারকারীর তথ্য রয়েছে, তাই তিনি লগ আউট করার সাথে সাথে আমাদের এটিকে DOM থেকে সরিয়ে দিতে হবে।

যখন লগআউট বোতামটি ক্লিক করা হয়, এটি আমাদের লগআউট ফাংশনটি কার্যকর করে যা বর্তমান ব্যবহারকারীকে খালি স্ট্রিংয়ের প্রাথমিক অবস্থায় ফিরিয়ে দেয়। যেহেতু আমাদের লগআউট ফাংশন সেটস্টেটকে কল করে, প্রতিক্রিয়াটি কন্টেইনার উপাদানটিকে পুনরায় রেন্ডার করবে। এখন, এটি UserProfile কম্পোনেন্ট দেখাবে না এবং আমরা একটি পপ-আপ সতর্কতা পাব যা ব্যবহারকারীকে সে লগ আউট করেছে তা জানানো হবে।

উপসংহার

জীবনচক্রের প্রতিক্রিয়া করার জন্য এখানে কভার করার চেয়ে আরও অনেক কিছু রয়েছে। এই প্রবন্ধের লক্ষ্য হল কিছু সাধারণ কোড উদাহরণ সহ মৌলিক ধারণাগুলি প্রবর্তন করা। এখন যেহেতু জীবনচক্রের ধারণাটি চালু করা হয়েছে, অফিসিয়াল প্রতিক্রিয়া ডকুমেন্টেশন আরও স্পষ্ট হবে।

এই নির্দেশিকা এবং সম্পূরক নিবন্ধগুলি পড়ার পরে, আপনি এখন রিঅ্যাক্টে কী জীবনচক্র রয়েছে সেই সাথে আপনার নিজের থেকে আরও গভীরে যাওয়ার ক্ষমতা সম্পর্কে উপলব্ধি করতে পারবেন। প্রোগ্রামিংয়ের সমস্ত জটিল ধারণার মতো, প্রতিদিনের অনুশীলন বিস্তারিতভাবে কাজ করতে সহায়তা করে।