React — это все о компонентах. Приложения, созданные с помощью React, имеют компоненты в качестве строительных блоков. Если пользовательский интерфейс, созданный с помощью React, представляет собой сборку Lego, то каждый отдельный элемент Lego можно рассматривать как компонент. Именно так и создаются приложения в React, посредством компоновки компонентов. Компонент можно рассматривать как четко определенный план элементов пользовательского интерфейса и экранов, которые мы можем повторно использовать в нашем приложении.
Поскольку мы так любим формальные определения, давайте посмотрим, как ReactJS определяет компоненты.
Концептуально компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые «реквизитами») и возвращают элементы React, описывающие, что должно появиться на экране.
Компоненты позволяют разделить пользовательский интерфейс на независимые повторно используемые части и рассматривать каждую часть отдельно.
Мы видим, что компоненты похожи на функции, которые принимают параметр с именем «props» и возвращают элементы React. Компоненты — это слабосвязанные независимые блоки, содержащие как разметку, так и логику. Итак, когда мы пишем компонент, у нас есть рабочий объект, который может отображать пользовательский интерфейс, а также обрабатывать написанные для него взаимодействия.
Другая важная часть приведенного выше определения заключается в том, что
… и вернуть элементы React, описывающие, что должно появиться на экране.
Ранее мы установили тот факт, что React позволяет нам декларативно создавать пользовательский интерфейс на Javascript, а приведенное выше определение относится к элементам React как к описанию того, что должно отображаться на экране. Это означает, что компонент возвращает объявление того, как будет выглядеть пользовательский интерфейс. Итак, что же это за элементы React? Мы углубимся в них позже в этой статье.
Наш первый компонент React — скажите «Привет!»
Давайте напишем наш самый первый компонент React. Компонент React выглядит следующим образом.
Поздравляем! Вам только что нужно написать свой самый первый компонент React. Как бы просто это ни казалось, именно так определяется компонент React.
Приведенный выше код показывает, что компонент React написан просто как функция, возвращающая некоторый HTML. Но подождите… Это действительно HTML? Вы будете удивлены, узнав, что это не HTML. Тогда что это? Мы обсудим это через мгновение. Сначала нам нужно понять некоторые основные вещи, например, как вы можете определить компонент в React.
Приведенный выше код представляет собой функциональный компонент в React, поскольку мы написали его как функцию. Однако это не единственный способ определения компонента в React.
Типы компонентов React
В React есть два типа компонентов
- Функциональные компоненты
- Компоненты на основе классов
Функциональные компоненты
Как следует из названия, когда мы пишем компонент React как функцию, он называется функциональным компонентом. В React этот тип функций в основном используется для презентации и также известен как презентационные компоненты, т. е. когда вам нужно только отображать пользовательский интерфейс на основе некоторых реквизитов и не нужно управлять каким-либо внутренним состоянием. В частности, мы не можем использовать функциональные компоненты для других целей, кроме представления, потому что они не могут поддерживать и управлять некоторым внутренним состоянием. Таким образом, все, что они называют «Презентационными компонентами», является причиной и следствием ограничения функциональных компонентов, неспособных поддерживать и управлять внутренним состоянием.
Предположим, мы создаем ListView учеников в классе. Каждый элемент в списке будет отображать имя учащегося. В этом сценарии у нас будет компонент ListItem, который будет выглядеть следующим образом.
Мы видим, что этот компонент ничего не делает, кроме возврата элемента li, который будет отображать имя учащегося в виде элемента списка на экране. Мы не находим необходимости управлять какими-либо другими переменными состояния, а чтобы сохранить возможность повторного использования компонента, лучше, если мы получим имя ученика в реквизитах этого компонента. Помните реквизит? Входные данные, полученные компонентом React. Мы можем просто взять имя учащегося в качестве входных данных и отобразить его в пользовательском интерфейсе. Что мы здесь делаем, так это то, что мы служим только в качестве представления данных, передаваемых как элемент пользовательского интерфейса на экране, отсюда и название.
Важно.С момента выпуска React версии 16.8 около 3 лет назад мы также можем управлять состоянием функциональных компонентов, чтобы они больше не считались просто презентационными компонентами. Однако, чтобы лучше понять концепции React и общий поток, лучше всего начать с этого раннего способа ведения дел. Как только мы полностью усвоим концепции React, я перейду к использованию только функциональных компонентов и объясню все подробно. Но на данный момент нам важно изучить как основанные на классах, так и функциональные компоненты в их прежней сущности, чтобы мы могли действительно понять, с какими проблемами столкнулись и почему функциональные компоненты были созданы для сохранения своего состояния.
Компоненты на основе классов
Компоненты на основе классов написаны как классы и всегда расширяют класс Component в React. Эти компоненты являются основными строительными блоками любого приложения, созданного с помощью React. Они могут делать все, что могут функциональные компоненты, и, кроме того, они могут поддерживать и управлять внутренним состоянием. Почему мы все время говорим о государстве и почему для нас так важно уметь его создавать и управлять им? Компонент визуализируется на основе его состояния, и всякий раз, когда состояние компонента изменяется, он повторно визуализируется. Без состояния React не сможет отслеживать, что изменилось и что обновить в пользовательском интерфейсе.
Синтаксис для написания компонентов на основе классов следующий.
Компоненты на основе классов реализуют метод render, который возвращает элементы React. Метод рендеринга вызывается для отображения элементов React в браузере. Но зачем нам наследовать React.Component? Он обеспечивает доступ к другому очень важному понятию в ReactJS, то есть к методам жизненного цикла компонентов, которые играют жизненно важную роль в процессе создания компонентов, раскрывая различные моменты пути компонента React, которые мы можем использовать в качестве рычага, подробнее об этом позже в сериале. Этот базовый класс не только предоставляет все методы жизненного цикла, но и необходим для преобразования обычного класса в компонент React со всеми необходимыми функциями, такими как сохранение состояния, получение свойств, рендеринг и т. д.
Визуализация компонента React
Мы знаем, как определять компоненты React, но как мы будем их использовать и отображать в нужных местах? Мы используем компоненты React точно так же, как мы используем элементы React. Для рендеринга вышеуказанных компонентов React мы будем использовать следующий известный нам синтаксис, то есть открывающие и закрывающие теги, как HTML. Имя тега будет заменено именем компонента.
Важно: Имя компонента React обязательно должно быть написано с заглавной буквы. В противном случае React не распознает его как компонент React и не отобразит.
В приведенном выше примере React распознает его как компонент React и вызовет его метод render, который вернет элементы React, которые будут отображаться в браузере.
Составление компонентов React
Приложения React строятся на принципах композиции. Точно так же, как мы включаем различные теги для завершения представления пользовательского интерфейса, мы также можем отображать компоненты React внутри других компонентов React.
Давайте изменим OurFirstReactComponent, чтобы составить компонент ListItem, который мы ранее создали. Конечный результат будет выглядеть так.
Использовать компоненты React в другом компоненте так же просто. Это имеет смысл только потому, что мы определили компоненты как отдельные и повторно используемые строительные блоки, которые мы можем склеить вместе для создания пользовательского интерфейса.
Время для другой концепции. Вы можете видеть, что я написал некоторый текст между тегами ListItem. Что будет с этим текстом? Это подводит нас к другому термину, называемому дети компонента React. Все, что мы передаем между открывающими и закрывающими тегами компонента React, будет дочерним элементом этого компонента и будет передано ему через параметр/ввод props, который принимают компоненты React.
Компоненты компонента React — каламбур :)
Вот некоторые из наиболее важных компонентов компонента React, с которыми мы постоянно сталкиваемся и которые составляют основу разработки пользовательского интерфейса с помощью React.
Состояние
Состояние — это объект javascript, хранящий данные, которые нужны компоненту и на основе которых компонент будет повторно отображать.
Реквизит
Реквизит — это объект javascript, который компонент React получает в качестве входных данных. Они используются для передачи некоторых данных от одного компонента к другим компонентам, которым они могут понадобиться.
Дети
Как описано ранее, дочерние элементы компонента React — это элементы, которые записываются между открывающим и закрывающим тегами этого компонента React при его вызове. Дочерние элементы передаются компоненту как свойство в объекте Props.
JSX
Помните, когда мы хотели знать, что если компонент React возвращает или имеет в своем методе рендеринга не HTML, то что это такое. Это JSX. JSX — это расширение языка javascript, которое позволяет нам писать элементы React, которые являются наименьшими строительными блоками в React. В отличие от компонентов React, элементы нельзя разбить на другие элементы. JSX предоставляет подобный шаблону синтаксис, который хорошо знаком нам, разработчикам, как HTML. Однако это не HTML; вместо этого мы пишем javascript. React предоставил нам эти элементы, чтобы мы могли декларативно определить структуру нашего пользовательского интерфейса. Затем React берет эти элементы, созданные JSX, как объекты, и строит на их основе пользовательский интерфейс. Элемент в JSX похож на тег в HTML. JSX — это не просто язык шаблонов, он также сочетает в себе всю мощь Javascript.
Это причина отсутствия HTML-кода в исходном коде facebook, о котором я упоминал в предыдущей статье. HTML не было. Все было написано на Javascript, а React создал и смонтировал весь HTML на основе декларативных определений пользовательского интерфейса с использованием JSX.
Заворачивать
Компоненты — это строительные блоки приложений React. В React есть два типа написания компонентов: функциональные и основанные на классах. Функциональные компоненты не могут иметь состояние, в то время как компоненты на основе классов могут. Однако оба служат для возврата элементов React, которые в основном являются объектами, определяющими, как должен выглядеть пользовательский интерфейс. Мы можем составить различные компоненты. Некоторые из наиболее важных компонентов компонентов React — это состояние, свойства, дочерние элементы и JSX. Они используют эти атрибуты для определения пользовательского интерфейса и передают его React, который затем на их основе эффективно отображает и обновляет представления пользовательского интерфейса.
Что дальше?
Далее мы углубимся в State & Props. Однако перед этим мы научимся настраивать проект React локально, чтобы вы могли кодировать вместе со статьями и испачкать руки, выполняя некоторую практическую работу с React. Я также подготовил интересный проект для кодирования, пока мы учимся вместе. Мы начнем практическую работу со следующей статьи, а первый код вместе с кодом также будет включен в следующие статьи.
