Каков жизненный цикл у компонентов?
Жизненный цикл компонента в JavaScript - это последовательность этапов, через которые проходит компонент от момента его создания до удаления из дом-дерева. Это жизненный цикл включает несколько методов, вызываемых автоматически при определенных событиях.
Когда компонент создается, первым вызывается метод constructor(). В нем осуществляется инициализация состояния и свойств компонента. После этого вызываетется метод getDerivedStateFromProps(), который используется для получения начального состояния на основе пропсов.
Затем вызывается метод render(), в котором отрисовывается пользовательский интерфейс componente на основании его состояния и пропсов. Метод render() вызывается каждый раз, когда компонент должен перерисоваться, например при изменении состояния или пропсов.
Когда компонент получает новые пропсы, вызывается метод getDerivedStateFromProps(), который может вернуть новое состояние на основе новых пропсов.
Если в componente произошло изменение внутреннего состояния, то вызывается метод shouldComponentUpdate(), который решает, нужно ли перерисовать componente или нет. Если он возвращает true, то компонент будет перерисован, если false - то нет.
При перерисовке компонента вызывается снова метод render(). После этого, если компонент был перерисован и должен быть добавлен в DOM, вызывается метод getSnapshotBeforeUpdate(), который позволяет получить снимок до того, как произойдет обновление DOM.
После того, как компонент добавлен в DOM, вызывается метод componentDidMount(). В нем можно выполнить асинхронные операции, такие как загрузка данных или настройка подписок на события. Этот метод также может использоваться для установки таймера или интервала.
Когда компонент получает focus, вызывается метод componentDidFocus(). А когда он теряет фокус - componentDidBlur().
Если компонент получает новые пропсы и его состояние не изменилось, то вызывается метод getDerivedStateFromProps(), после чего вызывается shouldComponentUpdate() для решения о перерисовке.
Когда компонент удаляется из DOM, вызываются два метода: componentWillUnmount() и componentDidUnmount(). В первом можно выполнить очистку ресурсов, например отменить подписки на события или таймеры. Второй метод вызывается после того, как компонент был полностью удален из DOM.
