freeCodeCamp

4.6 KiB

Raw Blame History

title	localeTitle
Life Cycle Methods Of A Component	Методы жизненного цикла компоненты

Методы жизненного цикла компоненты

Когда мы начинаем работать с компонентами, нам нужно выполнить несколько действий для обновления состояния или для выполнения некоторых действий, когда что-то изменяется в этом компоненте. В этом случае пригодятся методы жизненного цикла компонента! Поэтому давайте в этой статье погрузимся в них.

В широком смысле мы можем разделить методы жизненного цикла на 3 категории.

Mounting
Updating
Unmounting

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

Mounting:

а. constructor()

б. componentWillMount()

с. render()

д. componentDidMount()

Updating:

а. componentWillRecieveProps()

б. shouldComponentUpdate()

с. componentWillUpdate()

д. render()

е. componentDidUpdate()

Unmounting:

а. componentWillUnmount()

Некоторые интересные факты, которые можно заметить:

constructor , componentWillMount , componentDidMount и componentWillUnmount будут вызываться только один раз в течение жизненного цикла компонента.
componentWillUpdate и componentDidUpdate будет выполняться тогда и только тогда, когда shouldComponentUpdate возвращает true.
componentWillUnmount() будет вызываться непосредственно перед unmounting любого компонента и, следовательно, может использоваться для освобождения используемой памяти, закрытия любых подключений к БД и т.д.

Многие вещи можно узнать, погрузившись в код. Так что заставляйте себя больше программировать.

Заметка:

«Предупреждения об устаревании будут включены с будущим выпуском 16.x, но устаревшие жизненные циклы будут продолжать работать до версии 17.¹

«Даже в версии 17 все равно будет возможно использовать их, но они будут сглажены префиксом 'UNSAFE_', чтобы указать, что они могут вызвать проблемы. Мы также подготовили автоматический сценарий, чтобы переименовать их в существующий код». 1

Другими словами, эти методы жизненного цикла будут по-прежнему доступны как:

UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

Новые методы жизненного цикла

Новые методы жизненного цикла будут введены в Реакт 17

getDerivedStateFromProps будет более безопасной альтернативой componentWillReceiveProps .
getSnapshotBeforeUpdate будет добавлен для поддержки безопасного чтения свойств из обновлений DOM.