Автор оригинала: FreeCodeCamp Community Member.
Крис Акино
«Когда я должен использовать реагирование?» Мои ученики в ConsicCrafts Спрашиваю мне этот вопрос в последнее время.
Мы на три месяца в Bootcamp и два дня в реакции. Несколько студентов прокомментировали, что реагирование имеет странную смесь, которая сочетает в себе знакомые с иностранницей.
И естественно так. Это похоже на причудливую смесь JavaScript и HTML, имея односторонние чувствительности рендеринга экспресс и руль.
Мой любимый выход – это приборные панели. Реагирование отлично подходит для создания панелей, которые независимо обновляют информацию. Это тот тип УИ, который является кошмаром, чтобы построить с помощью jQuery.
Тогда они спрашивают: «Хорошо, как?»
И тогда я покажу им … Pitmaster.
Во-первых, признание: у меня неестественная любовь к барбекю. Если я не ем барбекю, я делаю барбекю. (В Южном Соединении Барбекю является существительным, а не глагол. Это процесс разоблачения мяса до низкотемпературного дыма в течение нескольких часов.)
Последний день благодарения, в ожидании быть чрезвычайно ленивым, я построил устройство, которое контролирует прогресс в Турции в курильщике. Результаты были отображены в реальном времени на веб-странице. Предоставлено, Турция не занимает много времени, чтобы готовить по сравнению с другими видами мяса. И я действительно не что ленивый, но у меня имелось грандиозное видение.
Картинка это: у вас 12 часов в 18-часовом дыме, и вы бы очень скорее не вышли с дивана, чтобы еще раз проверить температуру. Кроме того, вы не должны открывать курильщик во время повара, тем самым вызывая огромную колебание температуры.
Детали оборудования могут заполнить еще один блог пост, но вот грубый эскиз этого.
Тканите безопасную еду, высокотемпературный тепловой резистор (термистор) в еду, прежде чем разместить ее в курильщик. Термистор – это кусок оборудования, который изменяет свою электрическую проводимость в качестве изменений температуры. Длинный провод бежит от термистора к Arduino.
Arduino запускает программу, которая преобразует аналоговое чтение от термистора в цифровое значение. Raspberry Pi выбирает Arduino для этого значения каждые несколько 100 миллисекунд, регистрирует его в файл, а затем нажимает его на любой клиент, подключенный через Websocket.
Это может звучать воображать, но вот что на самом деле выглядит карапт.
Первоначально интернет-пользовательский интерфейс для отображения текущей температуры был, чтобы поставить его прямо, действительно уродливым. Было именно то, что вы увидите в руководстве «Hello World», состоящий из одного необратимого H1 Во всех его времена новая римская слава.
Так что я построил Pitmaster , приборная панель, которая контролирует прогресс курильщиков. Вы можете взять копию кода здесь Отказ
В этом посте я пройду несколько ключевых концепций, которые ускользали за меня, когда начал изучать реагирование.
Обзор
Несмотря на все жужжание о «функционале, декларативном УВ» и «отлично от виртуального дома», я сосредотачиваюсь на этих трех рекомендациях при строительстве с реакцией:
- Данные в, UI OUT
- Создайте свои компоненты снизу вверх и передайте данные сверху вниз
- Сделать ваши компоненты максимально глупыми, но нет тупелки
С учетом этих, давайте посмотрим на пользовательский интерфейс.
Нарисование Pitmaster
Вот базовый каркас ui-ui ui:
Как рекомендуется в отличном Думать в реакции Страница, лучший способ начать – это визуальное расстройство вашего пользовательского интерфейса.
Pitmaster – это приложение, разделенное на две части: форма, которую можно использовать для добавления заказов и панели, которая отображает текущее состояние каждого заказа.
Форма может быть разбита на три части:
- Распадаться с различными типами продуктов
- Ввод текста для ввода имени человека, который заказывает еду
- Нажмите кнопку, чтобы отправить форму
Группа содержит только индивидуальный «монитор» для постановления пищевого продукта. Они кажутся более сложными, но они не делают многое другое, чем отображение текста и цифры. Мы начнем с этого, поскольку они демонстрируют наиболее фундаментальную идею в реакции: преобразование данных в интерфейс UI.
Использование функций для преобразования данных в компоненты пользовательского интерфейса
Реагистрировать идеально подходить к принципам атомной конструкции. Это не имеет ничего общего с ядерной физикой и все, что связано с недавним движением в дизайне пользовательского интерфейса. В атомный дизайн Вы начнете с проектирования самых маленьких визуальных компонентов, а затем составляя их в более крупные и более крупные. Это дает вам возможность повторно использовать компоненты в других частях вашего пользовательского интерфейса. В конце концов, это меньше работы и создает согласованность по всему вашему пользовательскому интерфейсу.
В Pitmaster вы можете увидеть, что температура считывается самая маленькая, поэтому я начну там. Еще одним хорошим кандидатом является Namelabel, но показания повторно используются чаще.
Создание компонента считывания
A Компонент В реакции это то, что принимает данные и возвращает описание пользовательского интерфейса, которое отображает эти данные. Функции именно правильный инструмент для работы. Считывание Компонент будет не более чем функцией, которая принимает текст, цифры в качестве аргументов и возвращает
Вот самая простая версия этого:
Есть две вещи, которые следует отметить об этом.
Во-первых, какие-либо данные, которые передаются на компонент, связаны в объекте, называемом реквизит Отказ Поэтому этикетка и ценность Доступны доступны как свойства реквизит объект.
Во-вторых, вы на самом деле не создаете элементы DOM, вы создаете React Elements, которые являются Описания элементов DOM. Это будет чувствовать себя очень разным, если вы используете для создания UIS с jQuery, где вы либо создаете элементы DOM, либо ссылаетесь на существующие элементы DOM. Причины этого скоро станут более очевидными.
Описание RECT.CREATELEDEDELEED («SPAN», NULL, PROPS.LABEL, PROPS.VALUE) означает, что тип элемента DOM является промежуток Отказ
Мы проезжаем нет реквизит к нему и вложенный внутри промежуток являются ценностями ropps.label и ropps.value. .
Значения, вложенные внутри элемента реагирования, называются дети.
Функции стрелки и разрушения
Существует альтернативный синтаксис для функций, которые сильно используются во многих кодовых базах RACT. ES6 Функции стрелки такие же, как анонимные функции, но с более коротким синтаксисом. (Потому что программисты ненавидят нажав больше ключей, чем им нужно!)
На следующем фрассетере кода значение функции стрелки присваивается переменной Считывание , который объявлен с использованием конститут , не var Отказ
А Const является переменным, которая не может быть переназначена.
Но подожди, есть все больше!
Мы можем использовать синтаксис разрушения ES6, чтобы вытащить определенные значения из реквизит Аргумент и назначьте их локальные переменные, все за один шаг.
Реагирование требует, чтобы ваши компоненты вернули один элемент. С функциями стрелки, если тело имеет единственное утверждение, и это Возвращение Заявление, тогда вы можете опустить фигурные скобки и Возвращение ключевое слово. Значение справа от стрелки неявно Возвращение ред.
Потому что Возвращение Значение может получить долго, вы увидите код, который выглядит так, где были добавлены скобки вокруг неявного возвращаемого значения:
Это то же самое, но это позволяет программисту сделать то, что они будут с пробелом.
JSX или «Почему есть HTML в моем JavaScript?»
Есть еще одна абстракция для добавления. Может быть, нам нужно будет поставить промежуток внутри Div Для детских целей:
Для этого мы должны написать следующий код в JavaScript:
Как вы можете себе представить, как мы пытаемся описать более сложные домовые структуры, вложенные Rect.Createelement Звонки могут быстро выйти из-под контроля. К счастью, Rect позволяет использовать дополнительный синтаксис для Rect.Createelement Это очень похоже на HTML. Вот этот компонент переписал, используя этот синтаксис:
Этот синтаксис jsx, который включен XML в нашем JavaScript. До того, как браузер запускает JavaScript, XML преобразуется в вложенные Rect.Createelement Функция звонков. Кроме того, оцениваются вьющиеся скобки, наряду с любыми переменными или выражениями JavaScript внутри вьющихся скобок, и результирующие значения замещены.
Преимущество здесь в том, что любой, кто знаком с HTML, может взглянуть на JSX и знать, какие элементы DOM будут произведены.
Пользовательские компоненты
Что удобно о Отреагировать Это то, что вы не ограничиваются описанием HTML-элементов. Как только вы создадите компонент, как Считывание , вы можете использовать его с Rect.Createelement или с jsx.
Вот полный список кодов для компонента, который отображает три последних температуры из трех разных временных интервалов (1 минута, 5 минут и 10 минут).
Вы можете смешивать свои пользовательские компоненты с нажимами HTML. Помните, ваш Считывание Компоненты производят элементы, которые являются промежуток внутри Div Отказ
И пройти аргументы, например реквизит, Для пользовательского компонента вы можете использовать синтаксис, который выглядит как атрибуты HTML:
Если вы посмотрите на Monitor.js , вы можете увидеть, что это комбинация Считывание С Термохозяйство , Namelabel и компоненты HTML:
К настоящему времени следует ясно, что компоненты не более чем сокращенные для вложенных звонков на Отреагировать . Каждый компонент получает данные ( реквизит ) от его родителя и передает данные своим детям. Все данные, которые отображаются в приложении React, изначально передавали в корне, максимальный элемент.
Но вопрос тогда становится, что является результатом всех этих вызовов функций?
Демистификация виртуального дома
Ответ заключается в том, что все эти вложенные Rect.Createelement Вызывы приводят к большому объекту JavaScript, также известный как дерево элемента. Вот элементное дерево, которое производится из
Реагирование использует дерево элемента для создания фактических элементов DOM и визуализируйте их на страницу. Это то, что подразумевается под термином Виртуальный дом. Дерево элемента служит планом для DOM, и React может относиться к этому, поскольку ему необходимо обновить страницу.
Обновление домо
Хорошо, какое-то время проходит и барбекю прогрессирует вкусную доброту. В качестве изменений температуры изменяются, так что UI. Скажем, что только первое значение истории температуры изменилось (от 154 до 156):
Когда данные изменяются, новые значения передаются в корневой компонент, а данные каскадят вниз по дерево компонента. Это приводит к новому дереву элемента.
Это полученное дерево элемента:
Реагировать тогда делает что-то очень умное. Это сравнивает это новое дерево элемента к предыдущему. Затем он определяет минимальное количество мест в DOM, которое он должен обновить. Это буквально выясняет разницу между двумя деревьями, чтобы сделать наименьшее количество работы Чтобы гарантировать, что DOM отражает самую последнюю версию данных. (Вы должны быть увещены прямо сейчас, потому что это действительно удивительно.)
Следующий вопрос в том, что если все в дереве элементов – это статическое значение, как и где и где мы не поддерживаем данные приложения?
Хороший пример компонента, который должен идти в ногу с данными приложения, является Foodchooserform Отказ Поскольку пользователь вводит информацию в форму, данные в форме изменения, и это технически вызывает элементы формы для переназначения. Но нам нужно убедиться, что все, что пользователь введен до сих пор, сохраняется.
Добавление компонентов класса
До сих пор мы только смотрели на компоненты, которые являются функциями. Более конкретно, они известны как Функциональные компоненты без гражданства Отказ Большинство ваших компонентов будут иметь этот сорт. Есть еще один рода компонент, который имеет несколько дополнительных возможностей. Чтобы создать их, нам нужно использовать синтаксис класса ES6.
Вот Foodchooserform , показывая все, кроме элемента дерева, которое он производит.
Классы в JavaScript действительно просто синтаксический сахар Для функций и Прототипы Отказ В целом, классы используются для создания специализированных версий существующих типов объектов. При использовании с реагированием они в основном создают компоненты, которые могут удерживать состояние данных приложения между рендерами. Foodchooserform является примером Составляющий компонент условного класса.
Он наследует от Реагировать. Компонент и призывает Супер (реквизит) в его конструктор . Кроме того, обратите внимание, что он инициализирует переменную экземпляра это . Государство Переменная – это то, где компонент класса хранит свои данные приложения. У него есть два других метода _UpdateorderName. и _Updatefoodchoice Отказ Каждый из этих методов звонит this.setState , который является методом, предоставленным Реагировать. Компонент Отказ Это метод, который компоненты класса должны использовать для внесения изменений в значение это . Вы передаете это объектом с парами ключа/значения для обновления. Реагистрация заботится о остальных.
Вот полный компонентный код. Это включает в себя определение оказывать Способ, который эквивалентен возвращаемой стоимостью функционального компонента без гражданства.
Методы _UPDATEORDERNAME , _Updatefoodchoice и _handlesubmit все префиксированы с подчеркиванием. Это обычная конвенция, которая отличает частные методы от унаследованных методов. Эти частные методы передаются как опора S до обработчиков событий компонентов, перечисленных в оказывать метод. Эти компоненты получат эти функции и слепо называют их, когда эти события срабатывают, что вызывает изменение для Foodchooserform ‘s штат .
Вот как большинство ваших компонентов могут быть «глупыми», в то время как выбор немногих может быть ответственным за поддержание состояния. Ваши тупые компоненты знают достаточно, чтобы позвонить этим функциям и передавать им нужную информацию. В этом случае Foodchooser звонки _Updatefoodchoice Всякий раз, когда что-то выбрано из его выпадающего меню, а Namelabel звонки _UpdateorderName. в качестве типов пользователей в текстовом поле. Foodchooserform Получает наиболее текущую стоимость для выбора продуктов питания и названия заказа и сохраняет его через this.setState Отказ
Foodchooserform Также вызывает функцию, которую она была передана как реквизиты. В конструкторе (где он получает все его реквизиты), он экономит ссылку на rops.submithandler В качестве переменной экземпляра Это. Субмитандлер Отказ В оказывать Метод, он передает ссылку на его _handlesubmit Метод для Форма составная часть.
Когда Форма Отправить событие срабатывания, _handlesubmit называется и информация о событии передается ему. Foodchooserform предотвращает Форма от отправки (что бы привести к перезагрузке страницы). Тогда это называет субмитандер , передавая его текущее значение это . Наконец, это сбрасывает стоимость его Государство , эффективно сбрасывая форму, выключающее оказанные значения.
И где эта новая информация о еде сейчас идет? Весь путь к вершине.
Компонент Pitmaster
Pitmaster поддерживает список всех продовольственных заказов в рамках его Государство , который он проходит к Мониторинг . Это обеспечивает Foodchooserform Со списком вариантов пищевых продуктов и функцией обратного вызова для использования всякий раз, когда был размещен новый заказ. Его оказывать Метод освежительно Кратко:
Он имеет частные методы добавления и удаления заказов, а также обновление списка температур. Все остальные поведения были спрятаны в других компонентах.
Заключение
Изучение React не является легкой задачей, но после того, как вы увидите, как общие шаблоны относятся к основам JavaScript. Функции преобразуют ваши данные в ваш интерфейс UI. Небольшие компоненты должны быть составлены в более крупные, и только некоторые из них должны управлять состоянием. Придерживайтесь этих рекомендаций, и вы хорошо на пути к овладению реагирования.
Мой DigitalCrafts Студенты немного легче дышат, когда они смело решают еще одну новую тему в веб-разработке. Они знают, что они все еще могут использовать jQuery для меньших рабочих мест, построить спину с Postgres и Express для веб-сайта, представленного на сервере, или использовать реагирование на компонентные приложения на основе компонентов. Самое главное, что они могут взять эти основы, они ставили много часов, и примените их к любой блестящей новой вещи.
Теперь мне интересно, что они будут спросить меня, когда мы возьмем на redux на следующей неделе …
Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-dashboard-for-your-grill-using-arduino-and-react-425fb8d57ffe/”