React komponentlari yaratilishidan DOM dan olib tashlanishigacha qanday bosqichlardan o'tadi?

React komponentlari yaratishdan DOMdan olib tashlanishigacha bir nechta asosiy hayot aylanishi bosqichlaridan o'tadi:

1. Yig'ilish (Mounting) — komponentni yaratish va DOMga joylashtirish.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Yangilash (Updating) — props yoki holat o'zgarganda yuzaga keladi.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. O'chirish (Unmounting) — komponentni DOMdan olib tashlash.

   • componentWillUnmount

4. Xatoliklarni boshqarish (Error Handling) — bolalar komponentlarida xatolik yuzaga kelganda.

   • static getDerivedStateFromError
   • componentDidCatch

Klass komponentlarida hayot aylanishi metodlaridan foydalanish misoli:

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

  componentDidMount() {
    console.log('Komponent yig'ilgan');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Komponent yangilangan');
  }

  componentWillUnmount() {
    console.log('Komponent olib tashlanmoqda');
  }

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

Funktsional komponentlarda, useEffect va boshqa hooklar yordamida shunga o'xshash bosqichlar amalga oshiriladi.