Что такое компонент react

React для начинающих: какие компоненты лучше — классы или функции?

React JS — это JavaScript-библиотека с открытым исходным кодом, создающая виртуальную DOM поверх стандартной DOM веб-страницы, что предоставляет инновационный подход к управлению состояниями веб-приложения. В React Native логика по сути та же, но специфичная для разработки приложений на мобильных платформах.

В руководстве рассмотрим следующие темы:

Кривая обучения

Чтобы освоить React Native, вам придется изучить React JS, а для изучения React JS необходимы предварительные знания HTML, CSS и JavaScript.

У React JS и React Native есть конкуренты?

Да! Для создания мобильных и веб-приложений прекрасно подходят несколько других библиотек или фреймворков, например, Flutter и Angular.

Почему React так называется?

В React приложения создаются на основе компонентного подхода: пользовательский интерфейс разделяется на отдельные и независимые компоненты, в дальнейшем собирающиеся в интерфейсы любой сложности.

Компоненты состоят из JavaScript-класса, состояния и метода рендеринга:

Метод render() возвращает JavaScript-объект, связанный с элементом DOM веб-страницы. React хранит в памяти облегченное представление DOM, для простоты оно называется “виртуальный DOM”.

Таким образом, при каждом изменении состояния компонента создаётся новый элемент React. Затем, в виртуальной DOM, React сравнивает этот новый элемент с реальной DOM и синхронизирует их. Таким образом, больше не нужно работать с DOM API в браузере, как в ванильном JavaScript или JQuery.

Следовательно, именно поэтому React называется “React” — он обнаруживает изменения в виртуальном DOM, сравнивая его с реальным DOM, и реагирует на них, обновляя реальный DOM соответственно.

Противостояние

Поскольку в последнее время противостояние компонентов-классов и компонентов-функций стало горячей темой в конкурентных дебатах среди сообщества React-разработчиков, многие из них еще не определились, какие компоненты лучше.

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

Синтаксис

У компонентов-функций и компонентов-классов синтаксис написания совершенно разный: компоненты-функции похожи на простые JavaScript-функции, а компоненты-классы, соответственно, похожи на обычные JavaScript-классы.

Компоненты-классы же пишутся на основе обычных классов ES6 JavaScript, как показано выше. Метод render() отрисовывает указанный внутри него пользовательский интерфейс.

Передача свойств

В компонентах-классах и функциональных компонентах работа со свойствами отличается. Пример:

Компоненты-классы — обычные классы ES6 JavaScript, поэтому свойства передаются в конструктор, как в примере выше. Доступ к свойствам в компоненте-классе получается следующим выражением:

В примере передаётся объект user со свойствами title и name :

Передача свойств компонентам, как классам, так и функциям, описывается так:

Управление состоянием

Метод-конструктор назначает начальное состояние класса, другими словами, распределяет состояние по компоненту-классу; также конструктор принимает свойства.

Компоненты-функции полезны в случаях, когда не требуется детальный контроль состояния.

Приведенный выше компонент Counter отображает количество нажатий на кнопку.

Хук useState импортируется из React и состоит из трех основных элементов:

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

Компоненты-классы реализуют следующие методы жизненного цикла:

Производительность

Хотя компоненты-функции — это обычные функции JavaScript, а компоненты-классы, соответственно, базируются на классах JavaScript, никем не было доказано, что компоненты-функции выполняются быстрее компонентов-классов.

Тем не менее, компоненты-функции многими программистами считаются более легкими, поскольку в них требуется компилировать гораздо меньше кода, чем в компонентах-классах. Кроме того, если говорить о меньшем количестве кода, то его сравнительно легче читать и тестировать.

Тестирование

Компоненты-функции легче тестировать, чем компоненты-классы, поскольку это просто JavaScript-функции; написание тестовых примеров и выполнение тестов намного удобнее, чем для компонентов-классов.

Для выполнения тестов рекомендуется фреймворк Jest, однако React Testing Library также прекрасно справится; обе библиотеки работают по-разному.

Всё-таки компонент-класс или компонент-функция?

Применение только компонентов-функций — это следование процедурному программированию, однако компоненты-классы — это следование объектно-ориентированной парадигме, следовательно, компоненты-функции могут показаться гораздо более простыми в реализации.

И компоненты классов, и функциональные компоненты имеют свои преимущества, уже рассмотренные в данном руководстве, а некоторые программисты предвзяты в своем решении. Итак, что же выбрать?

Задайтесь простым вопросом: компонент хранит какое-либо состояние?

Если да, то реализуйте его с помощью компонента-класса; в противном случае, реализуйте его в виде компонента-функции.

Применяйте оба варианта для повышения эффективности приложений!

Выводы

Мнения меняются со временем, но факты — нет, поэтому не позволим предвзятым мнениям влиять на принятие решений!

Иногда решение — это не вариант 1 или вариант 2: иногда вы просто создаёте вариант 3, гибрид.

Вывод состоит в том, что нужно верно применять как функции-компоненты, так и компоненты-классы, чтобы достичь максимально оптимального и эффективного подхода.

Обмен знаниями — единственный способ их получать: не стесняйтесь поделиться своим собственным мнением в разделе комментариев.

Источник

React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript

React — это библиотека JavaScript для создания пользовательского интерфейса.

Это официальное определение React. Но что если вы не знаете, что такое JavaScript? Что если вы не разработчик? Смогли бы вы тогда понять, что такое React?

Однозначно ДА. Именно поэтому я и написал эту статью на тему: Что такое React на самом деле? Что такое React.js (или ReactJS)? Для чего используется React? Почему React так популярен? Какие проблемы можно решить с его помощью?

Эта статья — введение в React для начинающих. И это первое, с чего стоит начать, прежде чем детально изучить React. Я объясню основные идеи React на пальцах (и с помощью картинок). Нет опыта работы с JavaScript? Не беда! Если у вас есть базовые знания HTML (например, HTML-тегов), эта статья должна вам понравиться.

Это как посмотреть на React с высоты птичьего полета, но я дам вам бинокль. Так что вы не только увидите общую картину того, что делает React таким особенным, но и увеличите изображение, чтобы получить практический опыт написания реального React-компонента. И да, никаких знаний JS не требуется!

Не нужно быть опытным разработчиком, чтобы понять суть React!

Ниже я это вам докажу, но сначала краткое содержание поста:

Готовы начать путешествие?

Давайте начнем с того, о чем, возможно, вы слышали много раз — о DOM.

Что такое DOM?

Когда вы вводите адрес вашего любимого сайта в строку браузера, ваш компьютер устанавливает связь с другим компьютером где-то очень далеко. Его еще называют «сервер». Как правило, ваш компьютер запрашивает какую-то информацию, а сервер отвечает:

Ваш компьютер: Эй, что там такого классного в этом рандомном сайте learnreact.design?

Сервер: Подожди немного, мне надо кое-что проверить. Пип. Пип.

В ответе сервера вы в основном увидите три составляющие: HTML, CSS и JavaScript.

HTML перечисляет содержимое страницы и описывает её структуру. Сколько заголовков и абзацев? Какие изображения должен увидеть пользователь? Содержится ли эта кнопка и это текстовое поле в одном блоке?

Используя эту информацию, браузер создает то, что называется… DOM!

Так, стоп, DOM это… дерево? Да, это дерево! Как ни странно, многое в компьютере выглядит, как дерево. Давайте, как-то назовем нашего древесного друга… хм, как насчет Domo?

Домо — это, как натурщица в престижной художественной студии «Браузер». Его работа — позировать перед художником, который пишет портрет (или, возможно, миллионы портретов).

В реальной жизни DOM означает Document Object Model (Объектная модель документа). Это действительно модель — модель документа (также известная как страница). Она принимает позу. Браузер рисует портрет. Портреты — это то, что мы видим на странице: текстовые поля, абзацы, изображения и так далее. Работа разработчика похожа на работу режиссера, который говорит Domo, что надеть и какую позу принять. Все это определит, как в итоге будут выглядеть портреты.

Если вы используете браузер с компьютера, чтобы проверить, как выглядит DOM, щелкните правой кнопкой мыши на этой самой странице и выберите «Посмотреть код». Можете ли вы разобраться в том, что находится во вкладке «Элементы»?

DOM API

Нам часто хочется, чтобы страница была динамической и интерактивной — это означает, что её содержимое время от времени меняется: где-то добавляется или удаляется текст, или обновляется графика на основе новых данных, поступающих с сервера.

Помните: Для того, чтобы изменить то, что находится на странице, надо обновить DOM. Художник не сможет рисовать новые портреты, пока Domo не изменит свою позу.

Как заставить Domo принять новую позу?

Просто с ним поговорить. Он послушает. Интересно, что у ушей Domo есть название — DOM API.

Чтобы управлять DOM, разработчик пишет код на JavaScript, который взаимодействует с API DOM, и, в свою очередь, обновляет содержание страницы.

Больше сложностей!

Прямое общение с Domo было стандартным подходом к веб-разработке в течение многих лет, особенно когда контент был в основном статичным. Разработчик мог добавить интерактивность к статическим страницам, немного написав на JavaScript.

Но с появлением SPA (Single Page Application), таких как Gmail и Google Maps, пользователи стали ожидать гораздо большего. Вместо статических страниц им уже нужны интерактивные, быстрые и адаптивные приложения.

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

Традиционный подход перестал работать: слишком сумбурно и неэффективно всегда напрямую общаться с Domo.

Основные идеи React

Позвольте представить вам супергероя, React:

С React разработчикам больше не нужно разговаривать напрямую с Domo. React действует как посредник между разработчиком и Domo. Он сглаживает углы при общении и ускоряет процесс создания портретов.

React также называют «ReactJS» или «React.js», но «React» — это официальное название.

React состоит из кода JavaScript. Он построен таким образом, что в большинстве случаев нет необходимости непосредственно работать с DOM API. Вместо этого мы пишем более простой код, в то время как React обрабатывает разговор с DOM за кадром.

У React есть несколько суперспособностей для решения постоянно усложняющихся задач веб-разработки:

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

Просто читайте дальше!

Компоненты

Компоненты — это главная особенность React. Основная идея состоит в следующем: разделяй и властвуй. Если задачу целиком трудно понять, мы разбиваем её на более мелкие задачи, решаем их по одной, а затем объединяем результаты.

Построение приложения на React почти всё построено на работе с компонентами: мы разбиваем приложение на компоненты, находим лучшие компоненты для работы, подгоняем их друг под друга, создаем новые компоненты из уже существующих и т.д.

Сегодня такие инструменты для веб-дизайна, как Framer и Figma (и символы в Sketch), также основаны на компонентах. Они очень похожи на React-компоненты, но последние более гибкие и мощные. Фактически, создатели инструментов дизайна вдохновлялись компонентами из разработки ПО. Как только компонент создан, мы можем создать несколько его копий. Мы можем использовать его для создания других компонентов. Если мы изменяем компонент, всё, что включает в себя этот компонент, будет обновляться автоматически.

У компонентов в React есть два важных свойства:

Компоненты компонуемые. Они предназначены для повторного использования. Мы можем сделать новый компонент с помощью других компонентов.

Компоненты независимы друг от друга. Если мы изменим код в одном месте, то другие компоненты не сломаются.

Если вам это кажется абстрактным, не волнуйтесь! Скоро я покажу вам несколько примеров и подробно объясню эти свойства.

Декларативный интерфейс

Декларативное vs. императивное программирование

Работая напрямую с DOM API, нам пришлось бы указывать, какой элемент изменять в нужное время, в нужном порядке. То есть пришлось бы подробно объяснять Domo, как расположить голову, руки и ноги для каждого портрета.

Звучит утомительно и чревато ошибками! Так почему бы просто не сказать Domo, что мы хотим, вместо того, чтобы объяснять, как позировать? На самом деле, именно так строится пользовательский интерфейс на React. Разработчик делает эскиз того, что он хочет, а React объясняет Domo, как позировать.

Поскольку создаваемые нами приложения динамичны, нам часто хочется, чтобы Domo довольно быстро менял позы. Мы рисуем много эскизов и передаем всю эту стопку React. React складывает эти эскизы вместе и получается флипбук — небольшая книжка с картинками, при перелистывании которых создается иллюзия движения. Динамический пользовательский интерфейс выходит в свет!

Говоря техническим языком, если код определяет, как мы хотим, чтобы это было сделано, это императивное программирование; если он определяет, что мы хотим, это декларативное программирование. При прямой работе с DOM API применяется императивное программирование, при работе с React — декларативное.

Императивное программирование возникло, ещё когда компьютеры были примитивны, а людям надо было давать компьютерам подробные инструкции: где хранить числа, как их умножать и т.д. Но в итоге этим стало почти невозможно управлять, тогда люди стали писать умные программы, которые определяли проблемы и преобразовывали их в подробные инструкции. Так появилось декларативное программирование.

Виртуальный DOM

Декларативное программирование на React не только облегчило жизнь разработчика, но и предложило возможности для оптимизации производительности.

Когда у React есть все эскизы заранее, он может их отсортировать, удалить любую копию и убедиться, что Domo и художник делают как можно меньше работы.

Эти эскизы называются виртуальный DOM. Виртуальным DOM’ом управлять гораздо быстрее, чем DOM’ом. Большую часть времени разработчики работают с виртуальным DOM’ом вместо того, чтобы напрямую работать с DOM’ом. React делает всю грязную работу по управлению таким медленным DOM’ом.

Обновления реактивного DOM’а

Что может быть круче? Представьте себе, что вы можете оставить плейсхолдер в эскизах, чтобы они представляли различные вариации одной и той же позы. Таким образом, если кто-то попросит портреты Domo в другой шапке, нам не нужно будет снова общаться с React. Мы можем просто сесть и позволить React изменить портрет за нас.

Шапка — это данные, определяющие динамическое содержимое пользовательского интерфейса. Нам просто нужно связать элементы интерфейса с их соответствующими данными. Когда данные меняются, React автоматически обновляет соответствующие элементы DOM для нас, то есть DOM «реагирует» на любые изменения соответствующих данных. Не нужно больше отслеживать данные. Не нужно беспокоиться о том, когда обновлять DOM. Он просто обновляется автоматически (с помощью React).

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

Создаем свой первый React-компонент

Теперь давайте рассмотрим на практике то, что мы теперь знаем, и создадим несколько реальных React-компонентов. Чтобы вам было легче понять, я опустил некоторые детали в коде (в частности, JavaScript). Цель состоит в том, чтобы вы поняли суть React, не погрязнув в синтаксисе JS. Если вам удобно читать код на JavaScript, можете проверить реальные исходные тексты.

Итак. Допустим, мы хотим помочь Domo создать онлайн-магазин шапок.

Компоненты компонуемые

Мы можем разделить интерфейс на несколько частей:

Эта декомпозиция в коде может выглядеть так:

Что это за кастомные теги? Как мы сообщим React, что заголовок состоит из тега заголовка, большого количества элементов списка и поисковой строки?

Давайте создадим компонент Header!

Помните первое важное свойство React-компонентов? Они компонуемые. Это означает, что мы можем использовать компоненты для создания других компонентов — именно это мы только что и сделали.

Теперь задание для вас:

Допустим, мы также хотим добавить SearchBar в футер. Что бы вы сделали? Отредактируйте код ниже:

У вас получились две строки поиска? Значит вы поняли суть!

Компоненты можно использовать несколько раз

«Составной» означает способность создавать компонент, используя другие компоненты в качестве его составных частей. Это очень похоже на то, как всё происходит в природе, за исключением одного важного момента: когда мы используем компонент в другом компоненте в React, он все равно «прикрепляется» к оригинальному компоненту. Когда исходный компонент изменяется, все его производные меняются вместе с ним.

Измените ниже текст на кнопке в коде SearchBar:

Что-нибудь заметили? Панель SearchBar на обновленных Header и Footer. Так? Это очень похоже на то, как работают компоненты в таких программах дизайна, как Framer и Figma.

React-компоненты созданы для повторного использования. Как только компонент определен, мы можем использовать его как кастомный тег в других компонентах сколько захотим. Если мы изменим компонент, то все компоненты, которые его включают, изменятся соответствующим образом.

Компоненты независимы

Помните? React-компоненты независимы. Это значит, что если мы изменим один компонент, то другие компоненты (которые его не включают) всё равно будут вести себя так же, как и раньше.

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

Декларативное и императивное программирование

Теперь давайте перейдем к двум другим суперсилам React: декларативному интерфейсу и обновления реактивного DOM’а.

Уже выбрали шапку для Domo? Если нет, просто кликните по одной из шапок на рабочем столе. Шапка на голове Domo меняется, так?

В этом интерфейсе клик по элементу в таблице обновит данные «выбранной шапки». Так как мы связали DomoWithHat с «выбранной шапкой», шапка на Domo автоматически изменится. Помните? Обновления реактивного DOM’а.

Здесь вы видите код для компонента DomoWithHat.

В коде выше нам просто нужно определить, что мы хотим (Domo и шапка в div), и «подключить» данные («type = »). Когда данные элемента hat меняются (пользователь выбирает шапку), интерфейс обновляется автоматически. Нам не нужно беспокоиться о том, когда и как обновить DOM. Нам даже не нужно следить за данными. Нам нужно только набросать эскиз, т.е. код, приведенный выше. Вот они, две другие суперсилы React: декларативный пользовательский интерфейс и обновления реактивного DOM’а.

Заключение

Поздравляю! Вы закончили первый и самый важный урок по React! Он о том, зачем нам вообще нужен React. Вот три основных плюса, которые делают React таким мощным: компоненты, декларативный интерфейс и обновления реактивного DOM’а.

На самом деле, готов поспорить, что даже некоторые опытные разработчики React (например, я!) не очень хорошо понимают эти понятия. Когда я написал первую версию этой статьи несколько лет назад, я обратил внимание на некоторые нестыковки. Надеюсь, что эта версия будет более точной!

Источник

Компоненты и пропсы

Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз. На этой странице мы ознакомимся с самой идеей компонентов — детальное описание API находится здесь.

Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.

Функциональные и классовые компоненты

Проще всего объявить React-компонент как функцию:

Эта функция — компонент, потому что она получает данные в одном объекте («пропсы») в качестве параметра и возвращает React-элемент. Мы будем называть такие компоненты «функциональными», так как они буквально являются функциями.

Ещё компоненты можно определять как классы ES6:

С точки зрения React, эти два компонента эквивалентны.

Функциональным и классовым компонентам доступны дополнительные возможности, о которых мы поговорим в следующих главах.

Как отрендерить компонент

Пока что мы только встречали React-элементы, представляющие собой DOM-теги:

Но элементы могут описывать и наши собственные компоненты:

Когда React встречает подобный элемент, он собирает все JSX-атрибуты и дочерние элементы в один объект и передаёт их нашему компоненту. Этот объект называется «пропсы» (props).

Например, этот компонент выведет «Привет, Алиса» на страницу:

Давайте разберём, что именно здесь происходит:

Привет, Алиса

Привет, Алиса

Примечание: Всегда называйте компоненты с заглавной буквы.

Если компонент начинается с маленькой буквы, React принимает его за DOM-тег. Например,

Чтобы узнать больше про это соглашение, прочитайте Углублённое изучение JSX.

Компоненты могут ссылаться на другие компоненты в возвращённом ими дереве. Это позволяет нам использовать одну и ту же абстракцию — компоненты — на любом уровне нашего приложения. Неважно, пишем ли мы кнопку, форму или целый экран: все они, как правило, представляют собой компоненты в React-приложениях.

Например, компонент App может отрендерить компонент Welcome несколько раз:

Не бойтесь разбивать компоненты на части.

Допустим, у нас есть компонент Comment :

Этот компонент представляет собой комментарий в социальной сети. Его пропсы включают в себя author (объект), text (строка), и date (дата).

С этим компонентом может быть не очень удобно работать из-за излишней вложенности. Мы также не можем повторно использовать его составные части. Давайте извлечём из него пару компонентов.

Для начала извлечём Avatar :

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

Теперь можно немножко упростить наш Comment :

Это позволит ещё сильнее упростить Comment :

Пропсы можно только читать

Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, функциональный он или классовый.

Возьмём для примера функцию sum :

Такие функции называют «чистыми», потому что они не меняют свои входные данные и предсказуемо возвращают один и тот же результат для одинаковых аргументов.

А вот пример нечистой функции — она записывает данные в свои же аргументы:

React достаточно гибкий, но есть одно правило, которое нельзя нарушать:

React-компоненты обязаны вести себя как чистые функции по отношению к своим пропсам.

Конечно, интерфейсы приложений обычно изменяются с течением времени. В следующей главе мы узнаем о том, что такое «состояние» компонента. Состояние даёт компонентам возможность реагировать на действия пользователя, ответы сервера и другие события, не нарушая чистоту компонента.

Источник