www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Просмотр жизненного цикла компонента React

Дата публикации Oct 3, 2019

React, инфраструктура JavaScript, используемая для создания пользовательских интерфейсов, использует так называемые компоненты и DOM, или объектную модель документа - виртуальное представление веб-страницы. Компоненты React имеют минимальное структурное требование, чтобы иметь только метод визуализации. В своем методе рендеринга компоненты React принимают входные данные и выводят отображение с использованием JSX, который представляет собой XML-подобный синтаксис, который делает вводимые данные доступными черезthis.props(Это в данном случае - каламбур не предназначен - это способ ссылки на JavaScript самого компонента!)

Компоненты React также могут хранить данные и получать к ним доступ через то, что называется состоянием. Состояние компонента - это просто объект JavaScript в виде простого оле (или «POJO», как его любит сообщество Flatiron), который может хранить данные. Доступ к состоянию компонента можно получить черезthis.state(что переводит в это состояние (конкретного компонента)). Каждый раз, когда состояние компонента обновляется, оно перерисовывается. Легко, правда?

У компонентов React также есть наследственность, в которой мы можем иметь «родительские компоненты», которые передают информацию своим дочерним элементам в виде подпорок, и эти «дочерние компоненты», как говорят, унаследовали эту информацию от своих родительских компонентов - очень похоже на люди! Также как и у людей, компоненты React имеют жизненный цикл. Они проходят через различные фазы, и на каждом этапе конкретные методы доступны и / или приняты. Три фазы жизненного цикла компонента React:

Монтирование: когда компонент создан и вставлен в DOM

Обновление: когда состояние компонента или реквизиты обновляются

Размонтирование: когда компонент удален из DOM

Поиск «жизненного цикла реагирования компонента» приводит к появлению множества удивительных ссылок на жизненном цикле компонента, но я обнаружил, что я гораздо больше разбираюсь в визуальных способностях, поэтому склоняюсь к большему количеству графических представлений концепций. Ниже приведены три этапа жизненного цикла и методы, которые выполняются на каждом из них (и, конечно, что они делают):

монтаж

  • конструктор(): вызывается перед монтированием, метод конструктора инициализирует состояние в компоненте и позволяет привязать методы обработчика событий к экземпляру компонента
  • статический getDerivedStateFromProps (): запускается непосредственно перед render () - изначально (и перед каждым последующим повторным рендерингом)
  • рендеринга (): фактическая установка компонента в DOM
  • componentDidMount (): запускается после любого рендеринга компонента первоначально (и после каждого последующего рендеринга) в DOM; обычно используется для настройки асинхронных процессов (например, HTTP-запрос на выборку данных на внешнем сервере), где мы можем указать, как обрабатывать долго выполняющиеся процессы (т. е. загружать или делать доступными данные, которые мы извлекли), чтобы получить что-то вернуться к пользователю в любое время.

обновление

  • shouldComponentUpdate (): вызывается до повторного рендеринга; сравнивает старый и текущий реквизиты и состояние, чтобы избежать ненужного повторного рендеринга
  • getSnapshotBeforeUpdate (): возвращает «снимок» компонента (т. е. положение прокрутки или любые другие отслеживаемые атрибуты компонента), который может быть использованcomponentDidUpdateметод (после следующего рендера)
  • статический getDerivedStateFromProps (): запускается непосредственно перед render () - изначально (и перед каждым последующим повторным рендерингом); редко используется для определения изменений состояния для подготовки к обновлению
  • рендеринга (): фактическая установка компонента в DOM
  • componentDidUpdate (): срабатывает сразу после повторной визуализации или обновления компонента. Принимает снимок, возвращенныйgetSnapshotBeforeUpdate,

размонтирование

  • componentWillUnmount (): запускается непосредственно перед удалением или отключением компонента из DOM. Предотвращает получение дополнительных данных для компонента и из него.

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map