В React у каждого компонента есть несколько методов, которые срабатывают в разные моменты «жизни» компонента. Эти методы называются методами жизненного цикла. Ниже я подробно расскажу, когда эти события запускаются и для чего они обычно используются. Обратитесь к диаграмме выше, чтобы наглядно понять, в каком порядке запускаются эти события.
конструктор (реквизит)
Метод конструктора запускается еще до начала монтажа. Это первый метод, вызываемый при инициализации компонента. Этот метод особенно полезен для создания начального состояния для компонента.
статический getDerivedStateFromProps (реквизит, состояние)
Этот метод запускается непосредственно перед запуском render. Это дает нам доступ к состоянию компонентов и свойствам непосредственно перед отрисовкой компонента. Это следует зарезервировать для редких случаев, когда вам может потребоваться вычислить изменения состояния до обновления.
render ()
В этом методе компонент отображается в виртуальной DOM React. Этот метод имеет доступ как к реквизитам, так и к состоянию.
componentDidMount ()
Этот метод запускается сразу после метода render. Это особенно полезно для асинхронных или длительных процессов. Вы не хотите, чтобы пользователь смотрел на компонент, который еще не смонтирован, потому что он ожидает запроса на выборку. Лучше всего отобразить страницу, а затем обновить ее соответствующей информацией - вот в чем преимущество этого метода.
shouldComponentUpdate (nextProps, nextState)
Этот метод запускается непосредственно перед повторной визуализацией компонента. Этот метод должен возвращать логическое значение, должен ли компонент повторно визуализироваться или нет. Это следует использовать для индивидуальной оптимизации производительности. Этот способ не самый оптимальный. React действительно заявляет: «Если функция render () вашего компонента React отображает тот же результат при тех же свойствах и состоянии, в некоторых случаях вы можете использовать React.PureComponent для повышения производительности». В большинстве случаев React.PureComponent предпочтительнее этого метода жизненного цикла.
getSnapshotBeforeUpdate (prevProps, prevState)
Этот метод запускается непосредственно перед тем, как React фиксирует контент из своего виртуального DOM в фактическом DOM. Этот метод используется для сбора информации, которая может быть изменена после обновления. Возвращаемое значение этого метода передается в componentDidUpdate.
componentDidUpdate (prevProps, prevState, снимок)
Этот метод запускается после повторной визуализации компонента из-за обновления. Этот метод используется не очень часто, но обычно используется для обновления сторонней библиотеки.
componentWillUnmount ()
Этот метод запускается прямо перед удалением компонента из DOM. Обычно он используется для выполнения любых действий по очистке, таких как завершение любых длительных процессов.
