React что это такое
React
JavaScript-библиотека для создания пользовательских интерфейсов
Декларативный
React делает безболезным создание интерактивных пользовательских интерфейсов. Создавайте простые представления для каждого состояния вашего приложения, и React будет эффективно обновлять и отрисовать только нужные компоненты при изменении ваших данных.
Декларативные представления делают ваш код более предсказуемым и легче для отладки.
Основан на компонентах
Создавайте инкапсулированные компоненты, которые управляют своим состоянием, а затем компонуйте их для создания сложных пользовательских интерфейсов.
Поскольку логика компонента написана на JavaScript вместо использования шаблонов, вы можете легко передавать различного типа данных через своё приложение и сохранять состояние вне DOM.
Учитесь один раз — пишите где угодно
Мы не строим предположений относительно остальной части вашего технологического стека, поэтому вы можете разрабатывать новые возможности в React без перезаписи существующего кода.
React также может работать на сервере с помощью Node и может быть задействован на мобильных приложениях с использованием React Native.
Простой компонент
JSX необязателен и не его требуется использовать в React. Попробуйте REPL Babel, чтобы увидеть необработанный код JavaScript, созданный на этапе компиляции JSX.
Loading code example.
Компоненты с состоянием
Loading code example.
Приложение
Loading code example.
Компонент, использующий внешние плагины
React — гибкий и предоставляет хуки, позволяющие вам взаимодействовать с другими библиотеками и фреймворками. В этом примере используется remarkable, внешняя библиотека для работы с Markdown, чтобы преобразовать значение
Что такое React и как его освоить?
Рассказываем про популярную JS-библиотеку и даём план её изучения
React-разработчики создают приложения на React, используя дополнительные инструменты: например, Redux, TypeScript или Jest. Это востребованная работа: на React.JS написаны Яндекс, Netflix, Facebook и другие известные сервисы. Фронтенд-разработчик в Яндекс.Практикуме Давид Роганов рассказал, что такое React, и составил гид для его изучения.
Что такое React
React — это JavaScript-библиотека для создания пользовательских интерфейсов. Обратите внимание, что это именно библиотека, а не фреймворк. React часто называют фреймворком, но это ошибка. Во-первых, его использование ни к чему вас не обязывает, не формирует «фрейм» проекта. Во-вторых, React выполняет единственную задачу: показывает на странице компонент интерфейса, синхронизируя его с данными приложения, и только этой библиотеки в общем случае недостаточно для того, чтобы полностью реализовать проект.
Вскоре после появления React и подобные ему решения (Vue.js, Svelte) практически захватили мир фронтенда: потому что они помогают решать проблемы, основываясь на идее декларативного программирования, а не на императивном подходе.
Оказалось, что декларативный подход отлично подходит для создания интерфейсов, и он прижился в сообществе. Этот подход работает не только в вебе: сравнительно недавно компания Apple представила фреймворк SwiftUI, основанный на тех же принципах.
Чтобы лучше понять, о чём идёт речь, рассмотрим императивный и декларативный подходы на примерах. Напишем две версии простого приложения: на HTML и JS (императивный подход) и на React (декларативный подход). Наша программа будет показывать число и кнопку, и при нажатии на неё исходное число будет увеличиваться на единицу.
Приложение на чистом HTML и JS
В рамках императивного подхода пошаговые инструкции для создания программы выглядят так:
Обратите внимание, что HTML-разметка и JS-логика хранятся отдельно друг от друга.
Приложение на React
Из-за специфики библиотеки код на React может выглядеть непривычно для того, кто пишет на JavaScript: потому что в тэге практически нет вёрстки. Но сосредоточимся непосредственно на приложении-счётчике: его основная логика находится на строках 25-40.
Вот, что в нём происходит:
Весь код находится внутри функции App. В React она и другие похожие функции называются компонентами. Компонент — это фрагмент интерфейса, который содержит разметку и, при необходимости, связанную с ней логику. Все React-приложения строятся на компонентах. При этом сам компонентный подход появился задолго до React, но здесь его совместили с декларативностью.
Сравнение двух вариантов приложения
В первом случае мы написали алгоритм для работы с элементами, значением и его изменения — шаги, необходимые для достижения результата.
Во втором, используя JSX-разметку и вспомогательные функции React, мы сразу описали результат, который хотим видеть. В этом и заключается отличие декларативного подхода от императивного.
Если сравнивать эти два приложения, то при использовании React можно выделить такие особенности:
Также стоит отметить, что в React-приложениях мы не работаем напрямую с DOM-деревом. Вместо этого мы описываем разметку с помощью JSX, а React уже сам решает, как превратить её в реальные DOM-элементы. Это становится возможно благодаря абстракции, которая называется виртуальный DOM.
Раньше в различных статьях часто можно было встретить заблуждение, что благодаря виртуальному DOM React быстрый. Следует понимать, что при прочих равных React-приложение не может быть быстрее того, что написано на чистом JS хотя бы потому, что сам React написан и выполняется на JS.
Особенности React
React — это не универсальный инструмент, который подойдёт для любого проекта. Чтобы понять, решит ли React ваши задачи, важно знать о его преимуществах и недостатках.
Эта библиотека действительно может упростить жизнь разработчикам:
Однако при использовании React есть особенности, которые важно учитывать:
Эти недостатки, конечно, не повод совсем отказаться от использования React и подобных ему библиотек при создании проектов. Но о них нужно помнить для того, чтобы использовать этот инструмент осознанно и понимая его ограничения.
Несмотря на то, что виртуальное дерево расходует дополнительные время и память, для большинства приложений это некритично: React остаётся достаточно быстрым и позволяет оптимизировать проблемные места там, где это нужно.
Что касается порога входа, то изучение React или подобных ему библиотек стоит рассматривать как инвестицию в себя, как в разработчика, потому что это актуальная, интересная и широко используемая технология.
Для каких проектов подойдёт React
Резюмируя все особенности, можно выделить несколько типов проектов, которым подойдет React.
React, возможно, не подойдет для простых приложений (одностраничных и одноразовых сайтов), потому что в этом случае для того, чтобы разобраться с настройкой проекта и окружения, уже понадобится много времени и труда.
Ещё React будет не самым удачным выбором для реализации частей проекта, которые очень чувствительны к потребляемым ресурсам. В этом случае возможно гибридное использование: когда само приложение по большей части написано на React, а требовательные к производительности места с ним не взаимодействуют – библиотека никак не мешает делать такие интеграции. Однако и тут следует подходить к вопросу без фанатизма: React достаточно быстрый в большинстве случаев, а оптимизировать узкие места всегда можно по факту.
Как изучить React
Один из наиболее полных и удачных ресурсов для первого знакомства и изучения React — это официальный сайт библиотеки. Он переведён сообществом на русский язык и поддерживается в актуальном состоянии. Если вы знаете английский, то стоит смотреть англоязычную версию. Тут логика такая же, как и с другими областями программирования — в англоязычном интернете гораздо больше информации, и она ближе к первоисточникам.
План изучения React может выглядеть так:
— способы подключения React к проекту;
— знакомство с компонентами: стейт, пропсы, жизненный цикл;
— виды компонентов: классы и функциональные компоненты, их отличия;
— разработка простого приложения на React.
— React хуки, кастомные хуки, рефы.
— Популярные шаблоны: HOCs, render props, глупые/умные компоненты, controlled/uncontrolled components.
— сторонние библиотеки (redux, mobx и другие).
Диагностика проблем с производительностью, использование профайлера и оптимизация приложений на React.
Более продвинутые концепции:
— принципы интеграции с другими js-библиотеками;
— lazy loading компонентов;
Изучение работы под капотом:
— виртуальное дерево и алгоритм reconciliation;
— понимание концепций и устройства reconciler и renderer;
— написание своего рендерера.
Почти все эти темы можно изучить на официальном сайте React.
Для тех, кто уже хорошо знаком с React, есть отличная статья «Build your own React» — она поможет глубже разобраться, как работает React изнутри. Ещё можно посмотреть записи выступлений с конференции React Conf.
Кроме этих ресурсов, на рынке много онлайн-курсов разной степени интенсивности и наполнения. Есть комплексные курсы, которые с нуля погрузят студента в экосистему React. Есть и те, которые сосредоточены на очень конкретных вещах, например, на использовании разных шаблонов или менеджеров состояния.
Почему сейчас стоит изучать React
Во-первых, React — это популярная библиотека, которая ещё долго будет актуальной. Это значит, что всегда можно найти проект, написанный на React, и поработать на нём. А на людей, которые хорошо разбираются в React, есть спрос на рынке.
Во-вторых, это целый дивный новый мир со своим огромным сообществом. React помогает взглянуть на разработку интерфейсов совершенно по-другому — через призму декларативного программирования. Это полезно для общего развития и расширения кругозора, а полученные знания упростят изучение других подобных библиотек и технологий (Vue.js, Svelte или даже SwiftUI). Кроме этого, многие принятые в сообществе соглашения, шаблоны и подходы сами по себе помогают писать более хороший и поддерживаемый код.
Но также важно понимать, что React — это библиотека на языке JS. И прежде чем изучать React, нужно на хорошем уровне овладеть JS, HTML и CSS. Это ускорит освоение React, а также повысит ценность разработчика на рынке: потому что знание фундаментальных вещей помогает подобрать технологию, лучше всего подходящую для решаемой задачи — будь то React или что-то другое.
React.js для новичков в программировании: что это, как устроен и зачем нужен
Если стажёр или совсем зелёный джун попросят вас объяснить, что такое React.js, — просто покажите им эту статью.
OlyaSnow для Skillbox Media
В интернете полно руководств по React.js с названиями типа for dummies, for idiots — вроде бы для чайников. Но они по большей части негуманны и довольно сложны — человеку без знания JavaScript пользы не будет, только сильнее запутается и почувствует себя тем самым dummy. Поэтому мы решили максимально просто объяснить, что такое React.js, для чего он нужен, как попробовать и что понадобится для полноценной работы.
Что это ещё за новый тикток такой?
React.js — это JavaScript-библиотека от Facebook для удобной разработки интерфейсов, то есть внешней части сайтов и приложений, с которой взаимодействует пользователь.
Главная фишка React.js — компоненты и состояния.
Компонент — это кусочек кода, который отвечает за внешний вид одного из элементов сайта или приложения. Причём такие кусочки-компоненты могут быть вложенными.
Состояние — это вся информация об элементе, в том числе о его отображении. Например, состояние объекта «термометр» может описываться свойствами current_temperature, min и max.
Фанат Free Software Foundation, использует Linux и недолюбливает Windows. Пишет истории про кодинг и программы на Python. Влюблён в Lisp, но пока что не умеет на нём программировать.
Переводим на понятный язык: что такое компоненты и состояния
Пока звучит немного абстрактно и сложно, но на деле всё гораздо проще. Потренируемся на Цукерберге: в конце концов, это его детище — ему и отвечать.
На скриншоте три крупных компонента — пост в ленте Facebook, блок краткой информации и блок с выводом фотографий. В каждый из них входят более мелкие компоненты. Например, внутри поста есть текст, изображение, аватарка, имя автора, лайки, комментарии, различные информационные элементы. Внутри блока с фотографиями — отдельные фото, а внутри блока с краткой информацией — собственно, та самая краткая информация.
У каждого из этих компонентов есть состояния. Например, блок краткой информации будет по-разному выглядеть на мобильной и десктопной версии, у сердечка меняется цифра с лайками или цвет (если вы лайкнули или не лайкнули запись), а пост может обрезать текст, показывать содержимое полностью, меняться в зависимости от содержания. Ведь содержание поста — это тоже его состояние. Именно в этом проявляется гибкость и сила React.js: вы пишете компонент один раз, а потом просто передаёте ему разные состояния.
Посмотрите, как в зависимости от состояния меняется размер аватарки:
Уже получилось три состояния, но это не предел — ведь внешний вид аватарки различается в мобильной и десктопной версии, в приложении для Android, iOS и так далее. Отметим, что аватарка практически везде будет вложенной — в составе более крупных компонентов React.js, таких как пост, шапка, боковая панель или меню.
В React.js есть собственные средства для управления состояниями, но на практике в средних и крупных проектах чаще используют Redux — сторонний менеджер состояний. Он удобнее и лучше масштабируется.
Зачем нужен React.js, если есть HTML, JavaScript и CSS
Никаких огородов. React.js — это всего лишь способ в удобном виде представить код JavaScript и HTML, сделать его повторяемым и наглядным. Компоненты React.js пишут на особом языке — JSX, который выглядит как смесь JavaScript и HTML. Вот пример кода на этом языке:
JSX-код — то, что кажется HTML-тегом
, на самом деле элемент JSX
Код JSX довольно наглядный, и, кстати, то, что похоже на HTML, — вовсе не HTML 🙂 Звучит галлюциногенно, но это просто синтаксис JSX.
Браузеру понимать JSX не нужно — код React.js транслируется в JavaScript, с которым знаком любой уважающий себя браузер. Для этого написанное на React.js приложение прогоняют, например, через Babel — специальную программу-транспайлер, которая переводит разные представления (то есть языки вроде JSX) в JavaScript-код.
JSX-код JavaScript-код после Babel
На первый взгляд, механика странная. Кажется, это как если бы Достоевский придумал свой собственный язык, писал на нём книги, а потом их переводили бы на русский и только после этого издавали. И это была бы хорошая аналогия — но только если бы книги Достоевского переводились на русский автоматически, а писать на новом языке было бы в несколько раз быстрее.
У React.js есть три мощных преимущества:
Как работает React: подробное руководство
Основным источником вдохновения для меня послужила эта замечательная статья.
Введение
Что здесь происходит?
Функция React.createElement создает объект на основе переданных ей аргументов. Не считая некоторой валидации, это все, что делает данная функция.
type — это строка, определяющая тип DOM-элемента, который мы хотим создать. Это название тега, которое передается document.createElement для создания HTML-элемента. Это также может быть функция, о чем мы поговорим позже.
В данном случае children — это строка, но, как правило, значением этого свойства является массив элементов. Вот почему элементы — это деревья (tree) с точки зрения структуры.
Затем мы присваиваем узлу все пропы ( props ). В данном случае у нас имеется только заголовок ( title ).
Далее мы создаем узлы для дочерних элементов. В данном случае у нас имеется только один такой элемент — строка. Поэтому мы создаем текстовый узел.
Использование nodeValue вместо innerText позволит нам одинаково обрабатывать все элементы. Обратите внимание, что мы устанавливаем nodeValue так, как если бы строка имела props: < nodeValue: "Hello from MyReact!" >.
Функция createElement
Мы используем операторы spread для props и rest для children (поэтому children всегда будет массивом).
createElement(«section», null, «hello») вернет:
createElement(«section», < title: "hello" >, «hello», «world») вернет:
Комментарий /** @jsx MyReact.createElement */ сообщает Babel о нашем желании использовать собственную версию createElement для создания элементов.
Функция render
Создаем новый узел на основе типа элемента и добавляем его в контейнер.
Затем мы делаем тоже самое для каждого потомка узла рекурсивно.
И последнее, что нам нужно сделать, это присвоить узлу пропы элемента.
Самым простой способ запустить этот пример (и другие):
Конкурентный режим (Concurrent Mode)
Перед тем, как мы продолжим веселиться, придется сделать небольшой рефакторинг кода.
В чем проблема этого рекурсивного вызова? (Представим, что вы проходите собеседование для устройства на работу в Facebook 😉 )
Проблема в том, что после начала рендеринга, мы не остановимся, пока не отрендерим все дерево элементов целиком. Если такое дерево большое, его рендеринг может заблокировать основной поток выполнения программы (main thread) на значительное время. Если у браузера в это время появятся важные задачи, вроде обработки ввода пользователя (имеется ввиду введенных пользователем данных при заполнении полей формы, например) или плавное воспроизведение анимации, он не сможет этого сделать до завершения рендеринга.
Поэтому нам необходимо разделить процесс рендеринга на части. После выполнения каждой части мы позволяет браузеру выполнять свои задачи (при наличии таковых).
Подстраховаться на случай отсутствия поддержки requestIdleCallback можно так:
Подробнее о requestIdleCallback можно почитать здесь и здесь.
Волокно (Fiber)
Для организации правильного взаимодействия между единицами работы нам нужна подходящая структура данных. Одной из таких структур является fiber tree (условно можно перевести как «древесное волокно»).
У нас имеется одно волокно для каждого элемента и каждое волокно представляет собой единицу работы.
Рассмотрим на примере.
Предположим, что мы хотим отрендерить такое дерево элементов:
Одной из задач этой структуры данных является упрощение определения следующей единицы работы. Вот почему каждое волокно имеет ссылки на первого потомка ( child ), сиблинга ( sibling ) и предка ( parent ).
Вынесем код по созданию узлов из функции render в отдельную функцию, он пригодится нам позже.
Когда браузер будет готов, он запустит «колбек» workLoop и начнется обработка корневого узла.
Затем для каждого потомка создается волокно.
Наконец, мы определяем и возвращаем следующую единицу работы. Сначала мы возвращаем потомка. Если потомок отсутствует, возвращается сиблинг. Если сиблинга нет, поднимаемся к предку и возвращаем его сиблинга и т.д.
Этапы рендеринга и фиксации результатов (Commit)
В чем проблема этого блока кода? (Второй вопрос из 100 😉 )
Согласование (Reconcilation)
Здесь мы будем сравнивать старые волокна с новыми элементами.
Мы одновременно перебираем потомков старого волокна ( workingFiber.alternate ) и массив новых элементов для сравнения.
Для их сравнения мы используем тип:
Здесь React также использует ключи (keys) в целях лучшего согласования. Например, с помощью ключей определяется изменение порядка элементов в списке.
Когда старое волокно и новый элемент имеют одинаковый тип, мы создаем новое волокно, сохраняя узел из старого волокна и добавляя пропы из нового элемента.
Мы также добавляем в волокно новое свойство action (в React используется название effectTag ). Это свойство будет использоваться на стадии фиксации.
В случае, когда нужно удалить старый узел, нового волокна у нас нет, поэтому мы добавляем свойство action к старому волокну.
Поэтому нам нужен массив для узлов, подлежащих удалению.
Мы используем этот массив при фиксации результатов.
В функции commitWork заменяем parentNode.append(fiber.node) на следующее:
Мы сравниваем пропы старого и нового волокон, удаляем отсутствующие пропы и добавляем новые или изменившиеся пропы.
Если обработчик отсутствует или изменился, его нужно удалить.
Затем мы добавляем новые обработчики.
Функциональные компоненты (Functional Components)
Добавим поддержку функциональных компонентов.
Функциональные компоненты отличаются от обычных элементов следующим:
Мы проверяем, является ли тип волокна функцией, и на основе этой проверки запускам соответствующую функцию.
В функции updateHostComponent мы делаем тоже самое, что и раньше.
А в updateFunctionalComponent мы запускаем переданную функцию для получения дочерних элементов.
Логика согласования потомков остается прежней, нам не нужно ничего в ней изменять.
Во-первых, для того, чтобы найти предка текущего узла мы поднимаемся вверх по fiber tree до тех пор, пока не обнаружим волокно с узлом.
Хуки (Hooks)
Последнее, что нам осталось сделать, это добавить в функциональные компоненты состояние.
Здесь у нас имеется простой компонент счетчика. При клике по заголовку значение счетчика увеличивается на 1.
Обратите внимание, что мы используем MyReact.useState для получения и обновления значения счетчика.
Нам необходимо инициализировать некоторые глобальные переменные для хранения информации о хуках.
Сначала мы определяем рабочее волокно ( workingFiber ).
Затем мы добавляем массив hooks в волокно для того, чтобы иметь возможность вызывать useState несколько раз в одном компоненте. Также мы фиксируем индекс текущего хука.
При вызове useState мы проверяем, имеется ли у нас старый хук. Для этого мы заглядываем в свойство alternate волокна, используя индекс хука.
Если старый хук есть, мы копируем его состояние в новый хук, иначе инициализируем состояние начальным значением (в данном случае примитивом).
Затем мы добавляем новый хук в волокно, увеличиваем значение индекса на 1 и возвращаем состояние.
Мы помещаем эту операцию в очередь ( queue ) хука.
Затем мы повторяем логику функции render : новый workingRoot становится следующей единицей работы, что приводит к запуску новой стадии рендеринга.
Операции выполняются при следующем рендеринге компонента. Мы получаем все операции из очереди старого хука и применяем их по одной к состоянию хука. После этого мы возвращаем обновленное состояние.
Но прежде, чем мы закончим, внесем еще несколько мелких правок.
Запуск проекта с помощью Snowpack
Инициализируем проект, находясь в корневой директории:
Настраиваем snowpack ( snowpack.config.json ):
Настраиваем babel ( babel.config.json ):
Определяем команду для запуска snowpack в package.json :
Запускаем проект в режиме для разработки:
Заключение
Полезные ссылки для тех, кому, как и мне, всегда мало:
Надеюсь вам было интересно и вы не жалеете потраченного времени.
Основы React: всё, что нужно знать для начала работы
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.
Разобравшись с этим материалом, вы освоите следующее:
Предварительная подготовка
Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.
Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).
Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.
Что такое React?
React — это инструмент для создания пользовательских интерфейсов. Его главная задача — обеспечение вывода на экран того, что можно видеть на веб-страницах. React значительно облегчает создание интерфейсов благодаря разбиению каждой страницы на небольшие фрагменты. Мы называем эти фрагменты компонентами.
Вот пример разбивки страницы на компоненты:
Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?
Что такое компонент React?
Компонент React — это, если по-простому, участок кода, который представляет часть веб-страницы. Каждый компонент — это JavaScript-функция, которая возвращает кусок кода, представляющего фрагмент страницы.
Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.
Напишем компонент внутри тега
Функции можно писать и так:
React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.
Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:
Можно и написать собственный компонент на JSX. Делается это так:
Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.
Сборка компонентов
Компоненты React можно помещать в другие компоненты.
Вот что выведет вышеприведённый код:
Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.
Классы компонентов
До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.
В том случае, если вас интересуют компоненты без состояния, предпочтение следует отдать функциональным компонентам, их, в частности, легче читать. О состоянии компонентов мы поговорим ниже.
JavaScript в JSX
В JSX-код можно помещать переменные JavaScript. Выглядит это так:
Теперь текст «I am a string» окажется внутри тега
Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:
Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:
Подводные камни JSX
Для того, чтобы этого добиться, нужно воспользоваться свойством className :
Особенности создаваемого компонента
Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?
Изменение компонента React на основе его состояния
Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.
В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.
Как компонент реагирует на события?
Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.
Когда пользователь щёлкает по тексту, представленному тегом
Как должен работать компонент
Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.
Обмен данными между компонентами
Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.
Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:
Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:
События как свойства
Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.
Неприятная особенность setState
Поэтому вот так поступать не следует:
Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.
Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :