Что такое жизненный цикл

Question

Что такое жизненный цикл

Тип вопроса: Паттерны Вероятность: 10% Категория: Frontend Разработчик

Ответ

Жизненный цикл компонента в React — это последовательность этапов, которые проходит компонент от создания до удаления. Основные методы жизненного цикла:

Монтирование (Mounting):
- constructor() — инициализация состояния
- render() — отрисовка компонента
- componentDidMount() — компонент вмонтирован в DOM
Обновление (Updating):
- shouldComponentUpdate() — нужно ли обновлять компонент
- render() — перерисовка
- componentDidUpdate() — обновление завершено
Размонтирование (Unmounting):
- componentWillUnmount() — очистка перед удалением

Пример с хуками:

useEffect(() => {
  // componentDidMount
  return () => {
    // componentWillUnmount
  };
}, [deps]); // componentDidUpdate при изменении deps

Ответ 18+ 🔞

О, жизненный цикл компонента, ёпта! Это ж как история про Герасима и Муму, только в мире React. Сейчас разжую, чтобы понятно было, даже если ты в этом как баран в цирке.

Смотри, компонент — он как живой, блядь. Рождается, живёт, обновляется и, в конце концов, накрывается медным тазом. И на каждом этапе он может что-то делать, орать определённые методы, как тот немой Герасим, который только «Му-му» и мог.

Первая фаза — монтирование. Это когда компонент только появляется на свет, как щенок.

constructor() — это он ещё в утробе, только формируется. Тут ему задают начальное состояние, state, чтобы не вышел голым и беспомощным.
render() — а это уже сам процесс рождения, сука. Компонент говорит: «Вот как я должен выглядеть!» И вылезает в мир виртуального DOM.
componentDidMount() — вот он, момент! Компонент уже прилепился к реальному DOM, как банный лист. Теперь можно делать запросы к серверу, подписываться на события, в общем, жить полной жизнью. Главный девиз здесь: «Я всех закормлю нахуй!» (данными с бэкенда).

Вторая фаза — обновление. Жизнь-то меняется, блядь. Пришли новые пропсы, state обновился.

shouldComponentUpdate() — а тут компонент такой хитрожопый: «А надо ли мне вообще перерисовываться? Может, и так сойдёт?» Может вернуть false и сэкономить ресурсы. Умная, блядь, оптимизация.
render() — если решил, что надо, то снова кричит: «Вот я теперь вот такой!» И перерисовывается.
componentDidUpdate() — всё, обновился. Можно работать с обновлённым DOM, слать новые запросы. Но смотри, а то зациклишься, если будешь тут setState бездумно вызывать — получишь бесконечный цикл и пиздец.

Третья фаза — размонтирование. Всё хорошее когда-то кончается.

componentWillUnmount() — это предсмертный хрип. Компонент вот-вот удалят из DOM. Здесь надо всё за собой прибрать: отписаться от событий, остановить таймеры, отменить запросы. А то останутся утечки памяти, как говно на крыше, и всё приложение начнёт лагать. «Иди, шей, зашейся!» — вот тебе последняя команда.

А теперь, блядь, смотри как это выглядит на современных хуках, это просто песня!

useEffect(() => {
  // Это типа componentDidMount, блядь. Выполнится один раз при рождении.
  console.log('Я вмонтировался, ура! Теперь пойду данные загрузку, ёпта!');

  return () => {
    // А это — componentWillUnmount, чистая функция. Выполнится перед смертью.
    console.log('Всё, кранты. Отписываюсь от всего, чищу таймеры.');
  };
}, [deps]); // А вот этот массив [deps] — это прикол. Если он пустой — эффект только на mount/unmount.
           // А если туда что-то положить, то эффект будет срабатывать ещё и как componentDidUpdate
           // при изменении этих самых deps. Хуй с горы, а не логика!

Вот и вся философия, блядь. Родился, поработал, не забыл прибраться и умер. Как и мы все, если подумать. Главное — успеть впердолить нужную логику в правильный момент, а не тыкать её куда попало, как мартышлюшка.