რა ეტაპებს გადიან React კომპონენტები მათი შექმნიდან DOM-დან ამოღებამდე?

React კომპონენტები გადიან რამდენიმე ძირითადი სიცოცხლის ციკლის ეტაპს, შექმნიდან მოყოლებული DOM-დან ამოღებამდე:

1. მონტაჟი (Mounting) — კომპონენტის შექმნა და DOM-ში ჩასმა.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. განახლება (Updating) — ხდება props ან state-ის ცვლილებისას.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. მოწყვეტა (Unmounting) — კომპონენტის DOM-დან ამოღება.

   • componentWillUnmount

4. შეცდომების მართვა (Error Handling) — თუ მოხდა შეცდომა შვილობილი კომპონენტებში.

   • static getDerivedStateFromError
   • componentDidCatch

კლასის კომპონენტში სიცოცხლის ციკლის მეთოდების გამოყენების მაგალითი:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('კომპონენტი მონტაჟდა');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('კომპონენტი განახლდა');
  }

  componentWillUnmount() {
    console.log('კომპონენტი ამოიღება');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

ფუნქციური კომპონენტებში, useEffect და სხვა hook-ების საშუალებით, მსგავსი ეტაპები რეალიზდება.