77 lines
4.7 KiB
Markdown
77 lines
4.7 KiB
Markdown
---
|
||
title: Life Cycle Methods Of A Component
|
||
localeTitle: Методы жизненного цикла компонента
|
||
---
|
||
## Методы жизненного цикла компонента
|
||
|
||
Когда мы начинаем работать с компонентами, нам нужно выполнить несколько действий для обновления состояния или для выполнения некоторых действий, когда что-то изменится в этом компоненте. В этом случае методы жизненного цикла компонента пригодится! Поэтому давайте погрузиться в них в этой статье.
|
||
|
||
В широком смысле мы можем разделить методы жизненного цикла на **3** категории.
|
||
|
||
1. монтаж
|
||
2. обновление
|
||
3. Размонтирование
|
||
|
||
Поскольку методы жизненного цикла являются самоочевидными, я просто упомянул имена методов. Пожалуйста, не стесняйтесь внести свой вклад в эту статью, если это необходимо.
|
||
|
||
## Монтаж:
|
||
|
||
а. `constructor()`
|
||
|
||
б. `componentWillMount()`
|
||
|
||
с. `render()`
|
||
|
||
д. `componentDidMount()`
|
||
|
||
## Обновление:
|
||
|
||
а. `componentWillRecieveProps()`
|
||
|
||
б. `shouldComponentUpdate()`
|
||
|
||
с. `componentWillUpdate()`
|
||
|
||
д. `render()`
|
||
|
||
е. `componentDidUpdate()`
|
||
|
||
## размонтирование:
|
||
|
||
а. `componentWillUnmount()`
|
||
|
||
## Некоторые интересные факты, чтобы заметить:
|
||
|
||
* `constructor` , `componentWillMount` , `componentDidMount` и `componentWillUnmount` будут вызываться только один раз в течение жизненного цикла компонента.
|
||
* `componentWillUpdate` и `componentDidUpdate` будет выполняться только тогда и только тогда, когда `shouldComponentUpdate` возвращает true.
|
||
* `componentWillUnmount()` будет вызываться непосредственно перед размонтированием любого компонента и, следовательно, может использоваться для освобождения используемой памяти, закрытия любых подключений к БД и т. д.
|
||
|
||
Многие вещи можно узнать, погрузившись в кодирование. Так что заставляйте свои руки грязно кодировать.
|
||
|
||
Заметка:
|
||
|
||
> «Предупреждения об устаревании будут включены с будущим выпуском 16.x, **но устаревшие жизненные** циклы **будут продолжать работать до версии 17.** » 1
|
||
>
|
||
> «Даже в версии 17 все равно будет возможно использовать их, но они будут сглажены префиксом« UNSAFE\_ », чтобы указать, что они могут вызвать проблемы. Мы также подготовили [автоматический сценарий, чтобы переименовать их](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) в существующий код». 1
|
||
|
||
Другими словами, эти методы жизненного цикла previouse будут по-прежнему доступны как:
|
||
|
||
* `UNSAFE_componentWillMount`
|
||
* `UNSAFE_componentWillReceiveProps`
|
||
* `UNSAFE_componentWillUpdate`
|
||
|
||
## Новые методы жизненного цикла
|
||
|
||
Новые методы жизненного цикла будут введены в Реакт 17
|
||
|
||
* `getDerivedStateFromProps` будет более безопасной альтернативой `componentWillReceiveProps` .
|
||
* `getSnapshotBeforeUpdate` будет добавлен для поддержки безопасного чтения свойств из обновлений DOM.
|
||
|
||
Многие вещи можно узнать, погрузившись в кодирование. Так что заставляйте свои руки грязно кодировать.
|
||
|
||
### источники
|
||
|
||
1. [Вон, Брайан. «React v16.3.0: новый жизненный цикл и контекстный API». 29 марта 2018 года. Доступ: 22 мая 2018 года.](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)
|
||
|
||
### Ресурсы
|
||
|
||
[Обновление асинхронного рендеринга](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) |