Ի՞նչ փուլերով են անցնում 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-ների միջոցով։