Оригинальная ссылка:учись реагировать.дизайн/2017/06/08/…
Причины поставить лайк: Любовь к иллюстрациям, ярким и интересным, уникальный ракурс.
Серия блогов: Объяснение терминологии React с точки зрения непрофессионала и каракулей
- Иллюстрация React (эта статья)
- Графический React Native
- Компоненты, свойства и состояние
- Глубокое понимание свойств и состояния(для перевода)
- React Native против Cordova, PhoneGap, Ionic и других(для перевода)
React, ReactJS, React.js, React Native… Сколько раз вы слышали эти несколько похожие термины в последнее время? Вы запутались в том, что они из себя представляют?
Если вы дизайнер, ваша команда использует (или рассматривает) React или вам просто интересно узнать о «React», тогда эта статья для вас.
В тексте я использую только простой язык и иллюстрации, чтобы объяснить различные термины семейства React и углубиться в то, что именно делает React таким особенным. Эта статья не требует каких-либо знаний в области кодирования для прочтения. Я хочу, чтобы вы сначала ознакомились с некоторыми понятиями, чтобы потом не отчаиваться в процессе обучения. Если вам нужно вернуться к прошлому и узнать что-то новое позже, вы можете вернуться и прочитать в любое время.
Вы готовы? Вот так!
цель обучения
Надеюсь, после прочтения этой статьи вы сможете вернуться сюда и легко ответить на следующие вопросы:
- Что такое ДОМ?
- Что такое Реакт? Какие его аспекты больше подходят для разработки приложений?
- Чем React отличается от jQuery?
- Каковы основные концепции React?
- Что такое адаптивный пользовательский интерфейс?
- Каковы преимущества компонентов?
Что нужно знать о Сети
Давайте начнем с некоторых терминов, которые вы, вероятно, слышали в течение многих лет. Во-первых, это ДОМ.
DOM
Полное название DOM — объектная модель документа. Просто, верно? Это объектная модель, соответствующая документу.
Забудьте на мгновение о его концепции. Давайте сначала взглянем на знаменитую студию «Веб-браузер»! Сможете ли вы найти DOM на иллюстрации ниже?
Является ли DOM... деревом? Да, это дерево! Как ни странно, многие вещи, связанные с компьютерами, на самом деле похожи на дерево.
Давайте дадим DOM прозвище... как насчет Domo? Домо — модель студии «Веб-браузер», и его работа — позировать портретистам (а возможно, и миллионам).
Портрет — это то, что вы видите, когда просматриваете веб-сайт в своем браузере. Ответственность разработчика как у режиссера, он приходит сказать Домо, какую одежду надеть и в каких позах позировать. От этого будет зависеть, как портрет будет выглядеть в итоге. И jQuery, и React — это библиотеки, которые разработчики используют в качестве инструментов для взаимодействия с Domo.
jQuery
jQuery — это библиотека JavaScript, которая значительно упрощает разработчикам работу с DOM. Так какую роль он играет в истории Домо?
Это инструмент, упрощающий взаимодействие разработчиков с Domo, как с телефоном. Домо можно легко вызвать в любое время и в любом месте. Это намного удобнее, чем раньше (с использованием собственного JavaScript), помните, что до изобретения телефона люди должны были находиться достаточно близко, чтобы общаться друг с другом.
Мы уже много лет используем jQuery для прямой связи с Domo. Это удобно, но не без проблем.
React
Позвольте представить вам совершенно нового супергероя: React.
С React разработчикам больше не нужно напрямую общаться с Domo. React выступает посредником между разработчиками и Domo. Он снижает затраты на общение между ними, упрощая при этом процесс создания портрета.
React использует несколько методов для решения проблем с jQuery и другими инструментами. Вот три основные технологии:
- Отзывчивый пользовательский интерфейс
- виртуальный DOM
- компоненты
Отзывчивый пользовательский интерфейс
Используя jQuery для обновления DOM, вам нужно указать элементы, которые нужно изменить в нужное время и в правильном порядке. Это все равно, что давать Домо пошаговые инструкции о том, как поставить голову, куда положить руки, как расположить ноги и так далее, и на каждом портрете так.
Черт, это звучит утомительно и чревато ошибками! Почему бы просто не сказать Домо, какой эффект вы хотите, вместо того, чтобы указывать ему шаг за шагом, как позировать?
Еще круче, представьте, если бы вы могли сохранить заполнитель в процессе запроса для разных вариантов одной и той же позы. React может это сделать!
Таким образом, вам не нужно говорить Домо, какую шляпу надевать каждый раз, когда художник просит Домо надеть шляпу, которой он не пользуется. Вы можете просто сидеть там и позволить ему сменить шляпу.
Именно благодаря этой технологии React получил свое название. Пользовательский интерфейс, созданный с помощью React,Отзывчивыйиз. Как разработчик, вам просто нужно написать то, что вы хотитекакие, React разберетсякакДелать. Когда данные изменяются, пользовательский интерфейс изменяется соответственно. Вам больше не нужно беспокоиться об обновлении DOM, React сделает это за вас автоматически. Идея адаптивного пользовательского интерфейса значительно упрощает разработку пользовательского интерфейса.
Я знаю, я сказал, что вам не нужны какие-либо знания в области кодирования, но просто чтобы помочь вам взглянуть на вещи в перспективе, я все равно написал это в коде. Посмотрите на пример ниже (попробуйте сменить шляпу Домо):
Онлайн-демонстрация Codepen:Шляпа Домо.
Я объясню полный код в одной из следующих статей, а пока вам нужно только кратко взглянуть на код ключа:
const ThinkerWithHat = ({ hat }) => (
<div>
<Hat type={hat} />
<Thinker />
</div>
);
Обратите внимание, что вы просто определяете, что хотите (мыслители в шляпах), и «подключаетесь» к данным (“type = {hat}”). При изменении данных (пользователь выбирает шапку) UI автоматически обновляется.
виртуальный DOM
Еще одна проблема с jQuery — его скорость.
Как требовательный режиссер, вы ненавидите ждать. Вы хотите, чтобы портрет был сделан как можно быстрее. Однако и Домо, и художник относительно медлительны, а не медлительность Кисе, но Домо нужно время, чтобы переодеться и позировать, а художнику также нужно время, чтобы рисовать.
Что еще хуже, вы не можете общаться с Домо, пока художник не закончит портрет. На самом деле, вы ничего не можете сделать, кроме как ждать. Что за трата времени!
React использует другую технику для решения этой проблемы. React очень быстр для черчения. Это когда вы говорите ему, что вы хотите, и он почти сразу делает набросок и готов рисовать следующий. Теперь не нужно ждать! Вы можете продолжать говорить React, какой портрет вы хотите. React запишет все детали черновика и при необходимости покажет их Domo.
Что еще более важно, React очень умен. Он также сортирует все черновики, удаляя дубликаты и следя за тем, чтобы нагрузка на Домо и художника была сведена к минимуму.
Эти черновики и есть «виртуальный DOM». Виртуальный DOM намного быстрее, чем манипулирование DOM. Разработчики фактически манипулируют виртуальным DOM большую часть времени, а не напрямую манипулируют реальным DOM. React берет на себя эту часть грязной работы по управлению DOM.
компоненты
Третья технология в React — это концепция компонентов.
Компоненты должны быть простыми для понимания, потому что реальный мир, в котором мы живем, состоит из компонентов. Наши автомобили, дома и даже наши тела состоят из разных компонентов. Эти компоненты, в свою очередь, состоят из более мелких компонентов и так далее, пока не разобьются на атомы.
если вы знакомы сSketch(Примечание переводчика: известное программное обеспечение для дизайна, такое же название, как PhotoShop), компоненты такие же, как и в Sketch.symbolsочень похожий. Создание приложения React почти полностью связано с работой с компонентами: поиск лучшего компонента, объединение двух компонентов, создание новых компонентов поверх существующих и так далее.
Вернувшись в студию «Веб-браузер», вы описали свои требования к портрету как компоненты, которые React преобразовал во что-то, что Domo мог понять. Это сэкономит вам много времени, потому что вам не придется повторять общие части ваших требований снова и снова.
Еще одна интересная вещь о компонентах заключается в том, что если вы измените компонент, все, что использует этот компонент, будет автоматически обновлено.
Суммировать
Отлично. Надеюсь, вы сможете получить некоторые знания о React. По сути, это инструмент, который помогает разработчикам манипулировать DOM для создания страниц. Реактивный пользовательский интерфейс, виртуальный DOM и компоненты — три основные концепции React, которые делают React таким особенным. Конечно, в React есть и другие интересные концепции, такие как однонаправленный поток данных, о которых я расскажу в следующей статье.
существуетследующий постВ разделе мы рассмотрим связи и различия между ReactJS, React Native и React Sketch.app.
Я призываю вас вернуться к целям обучения и посмотреть, сможете ли вы сами ответить на все вопросы. Если у вас есть какие-либо вопросы или комментарии, пожалуйста, напишите мне!