Какви етапи преминават компонентите на 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>;
  }
}

В функционалните компоненти с hooks, подобни етапи се реализират чрез useEffect и други hooks.