State და სიცოცხლის ციკლი რეაქთში (reactjs)

იმისთვის, რომ რეაქთში ელემენტი დავარენდეროთ ჩვენ უკვე ვისწავლეთ root.render() მეთოდი, რომლის დახმარებითაც რეაქთის კოდში შეცვლილი მდგომარეობა ისახება ჩვენს ბრაუზერში.

დღევანდელი ჩვენი გაკვეთილი შეეხება რეაქთის მდგომარეობას (state)-ს და მისი სიცოცხლის ციკლს.

მოდი მივყვეთ წინა გავლილ მასალაში არსებული საათის მაგალითს, რომლის დახმარებითაც ეკრანზე ვბეჭდავთ საათს

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

setInterval(tick, 1000);

ქვემოთ მოცემული მაგალითების დახმარებით ჩვენ ვისწავლით თუ როგორ გავხადოთ Clock კომპონენტი მრავალჯერ გამოყენებადი, რომელიც იქნება ენკაფსულირებული (ანუ დამოუკიდებელი სხვა კომპონენტებისგან).

ენკაფსულაციის შედეგად ჩვენი კომპონენტი უკვე გამოიყურება შემდეგნაირად:

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>      
        <h1>Hello, world!</h1>     
        <h2>It is {props.date.toLocaleTimeString()}.</h2>    
    </div>
  );
}

function tick() {
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

თუმცა თუ ჩვენს კოდს დავაკვირდებით დავინახავთ, რომ ეკრანზე ინფორმაციის სწორად გამოსაჩენად აუცილებელია <Clock /> კომპონენტს გადავცეთ ახლანდელი თარიღი, ჩვენი მიზანი კი წარმოადგენს იმას, რომ თავად კომპონენტმა შეძლოს ამ თარიღის აღება და შემდეგ დარენდერება. იდეალურ შემთხვევაში ჩვენ უნდა დავწეროთ root.render(<Clock />);

ზემოთ მოთხოვნილი ლოგიკის დასაწერად აუცილებელია გამოვიყენოთ "state" Clock კომპონენტში.

State მსგავისა props-ის, მაგრამ ის არის სრულიად დამოუკიდებელი გარე კომპონენტებისან და კონტროლირდება თავად იმ კომპონენტის შიგნით, რომელშიც ვიძახებთ

State-ის გამოსაყენებლად ჩვენი ფუნქციური კომპონენტი დავაკონვერტიროთ კლასური ტიპის კომპონენტში

პირველ რიგში გამოვიძახოთ კონსტრუქტორი, რომელიც დაეთანხმება props პარამეტრს, ხოლო super-ს გადავცეთ props, შემდეგ this.state-ს მივანიჭოთ ობიექტი { date: new Date() }. ხოლო ახლანდელი თარიღის ეკრანზე გამოსატანად გამოვიყენოთ ჩანაწერი this.state.date.toLocaleTimeString()

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

სიცოცხლის ციკლის მეთოდები რეაქტში

აპლიკაციებში, რომლებშიც მრავალი კომპონენტი გვაქვს გამოყენებული აუცილებელია იმ კომპონენტებისგან მეხსიერების გასუფთავება, რომლებიც უკვე განადგურდა (ანუ ეკრანზე ჩანდა და რაღაც დროის შემდეგ, ან ლოგიკის მერე დავმალეთ), სწორედ ამაში გამოიყენება სიცოხლის ციკლები რეაქთში.

ზემოთ მოცემული მაგალითს თუ გავიაზრებთ ჩვენ გვჭირდება ჩავრთოთ დროის ამთვლელი (timer) მხოლოდ მაშინ, როდესაც ბრაუზერში პირველად დარენდერდება Clock კომპონენტი.

ამ პროცესს რეაქთში ეძახიან "mounting"-ს

ჩვენ ასევე გვჭირდება გავასუფთავოთ დროის ამთვლელი (timer) როგორც კი Clock კომპონენტი განადგურდება (ანუ ეკრანზე აღარ გვექნება გამოსახული).

ამ პროცესს რეაქთში ეძახიან "unmounting"-ს

რეაქტში ჩვენ გვაქვს სპეციალური მეთოდები კომპონენტში რომლებიც სრულდება მაშინ, როდესაც ხდება mounting და unmounting. ამ მეთოდების სახელებია:

• componentDidMoung() {}
• componentWillUnmount() {}

სწორედ ამ ორ მეთოდს ეძახიან რეაქთში სიცოცხლის ციკლის მეთოდებს (lifecycle methods)

componentDidMoung() მეთოდი ეშვება მას შემდეგ რაც კომპონენტი დარენდერდება ჩვენს ეკრანზე, სწორედ ეს მეთოდია კარგი იმისთვის რომ დავიწყოთ ჩვენი დროის ამთვლელის (timer) იმპლემენტაცია

componentDidMount() {
  this.timerID = setInterval(() => this.tick(), 1000);
}

ზემოთ მაგალითში შეატყობდით თუ როგორ მივანიჭეთ setInterval() მეთოდი this.timerID თვისებას.

მას შემდეგ რაც ჩვენი კომპონენტი განადგურდება ჩვენ შეგვიძლია გავასუფთავოთ ინტერვალი componentWillUnmount() მეთოდის დახმარებით

componentWillUnmount() {
   clearInterval(this.timerID);
}

და ბოლოს ჩვენ დაგვრჩა შევქმნათ tick() მეთოდი, რომელიც გაუშვებს Clock მეთოდს ყოველი წამის შემდგომ

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() { this.setState({ date: new Date() }); }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);