React компоненттери түзүүдөн алып салууга чейин кандай этаптардан өтөт?

React компоненттери түзүүдөн алып салынганча негизги өмүр цикли этаптарынан өтөт:

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'тар аркылуу окшош этаптар ишке ашырылат.