Junior — Middle

Leg uit wat de volgorde is van de fasen van het bestaan en de werking van een component in React, vanaf de creatie tot het verwijderen uit de DOM.

sobes.tech AI

Antwoord van AI

В React жизненный цикл компонента проходит несколько ключевых этапов:

Монтирование (Mounting) — создание и вставка компонента в DOM.
- Конструктор (constructor) — инициализация состояния и привязка методов.
- static getDerivedStateFromProps — обновление состояния на основе пропсов.
- render — возвращает JSX для отображения.
- componentDidMount — вызывается после вставки компонента в DOM, здесь можно запускать запросы или подписки.
Обновление (Updating) — происходит при изменении пропсов или состояния.
- static getDerivedStateFromProps — обновление состояния.
- shouldComponentUpdate — решает, нужно ли перерисовывать компонент.
- render — обновление JSX.
- getSnapshotBeforeUpdate — получение информации перед обновлением DOM.
- componentDidUpdate — вызывается после обновления компонента.
Размонтирование (Unmounting) — удаление компонента из DOM.
- componentWillUnmount — очистка таймеров, отмена подписок.

Пример с классом:

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

  componentDidMount() {
    console.log('Компонент вставлен в DOM');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Компонент обновился');
  }

  componentWillUnmount() {
    console.log('Компонент будет удалён из DOM');
  }

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

В функциональных компонентах с хуками аналогичные этапы реализуются через useEffect с разными зависимостями.

Vorige Volgende