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 и другие хуки.