Lifecycle

Question 1

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

Answer 1

Жизненный цикл компонента - это ряд этапов, через который может проходить компонент в React-приложении.

Всего принято различать 4 этапа: инициализация, монтирование, обновление, размонтирование. С каждым этапом связаны определенные методы жизненного цикла.

Question 1

Что происходит на этапе инициализации?

Answer 1

При создании экземпляра вызывается метод класса Component contructor, в котором можно задать начальное состояние this.state.

Перед монтированием вызывается метод UNSAFE_componentWillMount, который ранее применялся для заполнения начальным состоянием методом this.setState появления ES6.

Перед отрисовкой вызывается метод getDerivedStateFromProps(props, state) => nextState, который должен вернуть будущее состояние по переданным текущим props и state, у метода отсутствует доступ к экземпляру компонента.

Question 2

Что происходит на этапе монтирования?

Answer 2

Вызывается метод render для отрисовки компонента.

После отрисовки вызывается коллбек переданный в setState.

После отрисовки вызывается метод componentDidMount в завершении монтирования, который должен использоваться для вызова побочных эффектов.

Question 3

Что происходит на этапе обновления перед перерисовкой?

Answer 3

Перед перерисовкой, вызванной старшим компонентом, вызывается UNSAFE_componentWillReceiveProps(nextProps), который применялся для установки состояния методом this.setState в зависимости от nextProps и this.props.

Перед перерисовкой вызывается UNSAFE_componentWillUpdate(nextProps, nextState), который может применялся для внесения изменений в DOM соответственно будущим nextProps и nextState.

Перед перерисовкой вызывается метод getDerivedStateFromProps(props, state) => nextState, который должен вернуть будущее состояние по переданным текущим props и state, у метода отсутствует доступ к экземпляру компонента.

Перед перерисовкой вызывается метод shouldComponentUpdate(nextProps, nextState) => true, который должен вернуть true для разрешения перерисовки компонента.

Question 4

Что происходит на этапе обновления после перерисовки?

Answer 4

Вызывается метод render для перерисовки компонента.

После перерисовки вызывается коллбек переданный в this.setState.

После перерисовки перед внесением изменений в DOM вызывается метод getSnapshotBeforeUpdate(prevProps, prevState) => snapshot, который возвращает произвольный объект snapshot, который в свою очередь передается при вызове componentDidUpdate для адаптации интерфейса относительно прошлого состояния DOM.

После перерисовки вызывается метод componentDidUpdate(prevProps, prevState, snapshot), который используется для вызова побочных эффектов.

Question 5

Что происходит на этапе размонтирования?

Answer 5

Перед размонтированием вызывается componentWillUnmount, который используется для удаления связанных побочных эффектов.