React JS — жизненный цикл компонентов

React JS — жизненный цикл компонентов

От автора: в этой главе мы рассмотрим, какие методы обрабатывают в React жизненный цикл компонента.

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

componentWillMount выполняется перед рендерингом как на стороне сервера, так и на стороне клиента.

componentDidMount выполняется после первого рендеринга только на стороне клиента. Здесь выполняются запросы AJAX и обновления DOM или состояния. Этот метод также используется для интеграции с другими фреймворками JavaScript и любыми функциями с задержкой выполнения, такими как setTimeout или setInterval. Мы используем его для обновления состояния, чтобы мы могли запускать другие методы жизненного цикла.

componentWillReceiveProps вызывается, как только свойство обновляется до вызова другого рендера. Мы вызываем его из setNewNumber, когда обновили состояние.

shouldComponentUpdate должен возвращать значение true или false. Это определит, будет ли компонент обновляться или нет. По умолчанию установлено значение true. Если вы уверены, что компонент не нуждается в рендеринге после обновления состояния или свойства, вы можете вернуть значение false.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

componentWillUpdate вызывается непосредственно перед рендерингом.

componentDidUpdate вызывается сразу после рендеринга.

componentWillUnmount вызывается после того, как компонент размонтируется из dom. Мы размонтируем компонент в main.js.

В следующем примере мы устанавливаем начальное состояние в функции конструктора. Значение NumberNewnumber используется для обновления состояния. Все методы жизненного цикла находятся внутри компонента Content.

App.jsx

main.js

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

После первоначального рендеринга мы получим следующее.

Только componentWillMount и componentDidMount будут регистрироваться в консоли, так как мы еще ничего не обновили.

Когда мы нажмем кнопку INCREMENT, произойдет обновление, и будут запущены другие методы жизненного цикла.

Через десять секунд компонент отключится, и в консоли будет зарегистрировано последнее событие.

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree