Если вы думаете об использовании React, но ошеломлены количеством ресурсов, отказались от сопротивления шуму или просто хотите быть в курсе всего происходящего, читайте дальше. Если вы уже используете React, ненавидите React, все еще хотите сопротивляться React… читайте в любом случае заметки о скалах на собрании этих выходных.
Немного сверхреакции-иона
Вероятно, по этому вопросу нельзя написать ничего, что еще не было рассмотрено. Чтение каждого ресурса в удивительном реактивном репо эквивалентно завершению всей пушки Энциклопедии Британника. Трудоемкий, впечатляющий и поучительный. Тем не менее, у нас есть только до субботы, чтобы избежать смущения, и закодированный учебник не будет охватывать все модные слова, которые могут возникнуть.
Просто скажи мне, что такое React, пожалуйста
Бен Бэкбоун говорит: «Это просто V в MVC, так что он только на 1/3».
Вы говорите: «Я считаю, что сравнение с MVC бесполезно и интуитивно понятно, я играю с Lego и концентрируюсь на создании красивых блоков, которые могут поместиться где угодно».
Это строительный блок:
({ someText }) => <div>{ someText }</div>
React — это не фреймворк, это библиотека, которая позволяет вам составлять эти строительные блоки для создания поддерживаемых интерактивных интерфейсов.
Теперь вы, наверное, задаетесь вопросом, почему React такой пугающий и почему полоса прокрутки намного выше, чем вы надеялись … ну, например, в поход, вы не можете просто пойти в лес со своим бивом, вам нужно это … и это … и это…
Все, что я хочу для JSXmas, это ты
Алан Ангуляр говорит: «Вы помещаете HTML в свой JS и смешиваете проблемы».
Вы говорите: «Вы пьяны, Алан, идите домой… но также, это восхитительный способ выразить разметку, которая может быть перенесена на многие вещи, выглядит как HTML, так что нет нового DSL, который я должен изучать, и на самом деле моя единственная проблема — Представление просмотра моих данных ».
Да, JSX , вероятно, взял на себя всю тяжесть ненависти, но это то, что действительно отличает React от других и теперь принято другими библиотеками. Больше не нужно возиться с DOM на низком уровне, проверять атрибуты или беспокоиться о кросс-браузерных причудах. Я могу написать что-то похожее на HTML, но я также могу использовать старый добрый JS для манипулирования им .
Виртуальный ДОМ, DOM, DOM, ДОМ, ДОМ
Эдвард Эмбер говорит: «Перекрашивание движка Glimmer происходит намного быстрее, чем в Virtual DOM».
Вы говорите: «В то время как производительность — проблема для меня, я очень редко / никогда не создаю приложения, которые должны отображать 10 000 постоянно меняющихся элементов списка. Если технология привлекает внимание сообщества, стабильности, ремонтопригодности, тестируемости, это, вероятно, не слишком медленно ».
Взаимодействие с DOM сравнительно медленное, так как обычно оно занимает большую часть времени в данной операции по сравнению с JS в памяти. Команда React разработала Virtual DOM (VDOM), чтобы позволить им быстро сравнивать изменения состояния, чтобы минимизировать объем медленной работы, которую необходимо выполнить.
Я не знаю искусство, но я знаю, что мне нравится
Шарлотта CSS говорит: «Встроенные стили — это все, что не так с интернетом. No: before /: after, неоднозначная поддержка печати @media, un-DRY-код, проблемы с микшированием [Alan +1], дополнительные издержки для: hover и т. Д. Мне нужно продолжать? ».
Вы думаете: «Все это меркнет по сравнению с тем фактом, что они даже не работают со строгой политикой безопасности контента *, рад, что она этого не упомянула».
Вы говорите: «Это довольно много гипербол перед пустыней. В любом случае, псевдо-селекторы — это хак, я предпочитаю не использовать их, мне нравятся деревья, DRY — это то, что мне не нравится в вашем общем CSS, и еще раз, я просто заинтересован в использовании моего презентационного слоя по прямому назначению ».
Итак, вам не нужно использовать встроенные стили с React, вы можете быть менее смелыми и попробовать CSS-модули (если вам нравятся длинные имена классов в вашем HTML-коде), один из многих инструментов для CSS-вставки или просто использовать BEM .
Я настоятельно рекомендую вам попробовать, это означает, что контент и стиль вашего компонента тесно связаны (что вам нужно) и могут быть добавлены в любое место с уверенностью. Разработчики не случайно наступают друг другу на ноги, и не существует неуклюжего соглашения по присвоению имен, которое необходимо учить и контролировать. JS также отлично справляется с анимацией .
* чтобы избежать этой очень маленькой морщины, вы можете использовать Shadow DOM, взгляните на реакционную тень или клен для идей.
Вы и я теку в одном направлении
Кевин Нокаут говорит: «Благодаря двустороннему связыванию данных вы получаете высокоинтерактивные интерфейсы с небольшим количеством стандартного кода».
Вы говорите: «Однонаправленный поток данных — это наполовину головная боль, отладка и тестирование в одном направлении гораздо приятнее, особенно с чистыми функциями, которые не имеют побочных эффектов».
Итак, у нас есть наши строительные блоки, написанные в виде, похожем на HTML, со своими собственными защищенными стилями, и они будут обновлять DOM только тогда, когда они должны … но как вы заставляете их показывать вещи? При использовании идемпотентных функций рендеринга с прозрачностью ссылок, которые, конечно, так же чисты, как и безугольный снег 😉
Если вы помните только одну вещь для вечеринки, это основная концепция, компоненты React — это просто функции . Если вы даете им одинаковый ввод, они должны возвращать одинаковый вывод, вы передаете эти данные через реквизит . Тем не менее, компоненты также могут поддерживать свое собственное состояние , которое следует лечить с помощью детских перчаток .
В приложении React в идеале вам нужен один источник правды, умные компоненты (которые знают о данных и как их передавать) и тупые компоненты (которые ничего не знают и делают, как им говорят). Большая часть вашего приложения должна состоять из тупых компонентов, рабочих пчел, с компонентами более высокого порядка, управляющими данными для их передачи.
Сбитый с толку Redux
Джереми jQuery говорит: «Проблема с React в том, что вам нужно три дня, чтобы опробовать пятнадцать реализаций Flux, чтобы прийти к выводу, что вы не знаете, какая из них лучше. Вы идете с одним, и требуется еще один день, чтобы написать то, что я сделал за 10 минут ».
Вы говорите: «Да, это было что-то вроде жемчужины от Facebook (FB), и я полностью согласен, что сообщество оставило на размышление смутную философию. Хотя теперь у меня есть реализация Flux, мой код легко рассуждать, тестировать и масштабировать ».
Прелесть сообщества открытого исходного кода (OSC) состоит в том, что в конечном итоге будет найдено оптимальное решение, поэтому предложение философии OSC не является плохой вещью. Сами FB делают Flux по-разному, так что же это?
По сути, это механизм однонаправленного потока данных, который мы рассмотрели. Представление выполняет действие , которое посредством диспетчера обновляет хранилище, которое обновляет компоненты высшего порядка и последующих дочерних элементов. Всегда один путь, всегда предсказуемый .
В начале этого года дерзкий парень по имени Дэн собрал что-то для разговора. Людям это нравилось, на GitHub было больше звезд, чем на Млечном Пути, и он работал над этим все время. Он называется Redux, и я рекомендую эту реализацию. Это не совсем Flux, но инструментальные средства разработки являются исключительными с перемещением во времени и отменой / повторением и т. Д. Из коробки благодаря обновлениям магазина только через чистые редукторы .
Я никогда не изменится для тебя
Люди слишком заняты с портом и сыром в данный момент, но если бы они спросили об неизменности, вот мнение высокого уровня.
Когда состояние изменяется в нашем приложении React, все проверяется на наличие различий, прежде чем делается другая проверка на наличие различий в DOM. Проведение глубоких проверок на равенство является дорогостоящим, и это также влияет на VDOM К счастью, мы можем протянуть руку помощи React, используя неизменные данные. Если реквизиты компонента не изменились, и они являются неизменным объектом, текущее значение реквизита и следующее значение реквизита будут иметь одинаковую ссылку, что означает, что мы можем выполнить быструю проверку на неглубокое равенство в shouldComponentUpdate . Этот участник жизненного цикла React отключит работу по экономии VDOM и, следовательно, время.
С редукторами Redux вы получаете эту концепцию из коробки, вы берете предыдущее состояние и создаете совершенно новое состояние на основе полезной нагрузки действия. Это второе преимущество неизменности и повторяющаяся тема; это делает ваше приложение предсказуемым. Никаких ошибок, потому что что-то случайно изменило что-то другое, к чему оно не предназначалось или имело дело.
Скажи мне, куда идти
Эдвард Эмбер говорит: «Я могу подготовить свой проект за пару минут и получить абсолютно все, что мне нужно, я считаю React слишком легковесным».
Вы говорите: «Для меня использование большого количества библиотек / строительных блоков, каждый из которых хорошо выполняет свою задачу (микросервисы пользовательского интерфейса), очень легко обслуживается и легко проверяется на будущее».
Так что React не поставляется с маршрутизатором, но Майкл Джексон делает. Это де-факто способ маршрутизации в React и виртуальное требование для любого одностраничного приложения (SPA). Теперь у нас есть Promises, API выборки, сервисные работники, веб-работники, локальное хранилище, JWT , intl и т. Д. И т. Д. Вы можете создать собственный SPA с минимальной потребностью в больших инфраструктурах *, за исключением нескольких полифилов.
* не то, что рамки плохие сами по себе
Возьми эту дубинку
Вы говорите: «У меня есть все, что мне нужно для этого СПА, моя кружка пуста, эта статья слишком длинная, без заметного, доктор, я собираюсь разобраться с химчисткой до субботы».
Я говорю: «Я говорю вам, что сказать, а не наоборот, но… есть еще один последний необязательный кусок, а затем нам нужно поговорить о том, как вы собираетесь собрать все это воедино».
Redux делает все возможное, чтобы объяснить, как выполнять асинхронные действия и заполнить ваше приложение данными с помощью различных средств, включая промежуточное ПО . Нил Netflix выскакивает и говорит: «Давайте расслабимся и посмотрим на Falcor » , вы говорите: «На самом деле это звучит довольно неплохо, но я собираюсь сначала немного рассказать о Relay и GraphQL » .
У FB возникла проблема, когда они создавали мобильные нативные приложения, мобильные веб-приложения и другие наборы веб-продуктов. Как вы можете координировать невероятно сложную синхронизацию данных на этих платформах и использовать один и тот же язык, когда REST не сокращает его? Таким образом, у нас есть GraphQL (не имеющий ничего общего с базами данных Graph), который во многом похож на Flux — это просто концепция с несколькими реализациями ( включая JS ).
GraphQL — это язык, который позволяет внешнему разработчику контролировать свои требования к данным. Нет настраиваемых конечных точек REST, не надо беспокоить различные бэкэнд-команды для отправки дополнительного поля, просто запросите фрагмент данных с необязательными параметрами, и он будет вам возвращен.
Затем Relay подключает ваши компоненты React с помощью контейнеров и маршрутов к конечной точке GraphQL. Этот довольно сложный брак приводит к оптимистичным обновлениям, пакетным запросам и счастливой синхронизации данных из коробки … при условии, что у вас есть сервер GraphQL … и схема … и возможность разбираться с мутациями Relay и прикольным языком запросов …
Прошлой ночью мелкий рендеринг изменил мою жизнь
Роберто Реакто говорит: «Facebook использует Jest для тестирования своих компонентов, и вот что я использую».
Вы говорите: «Это очень медленно, это слишком сложно. Он действительно любит издеваться над всем. Мелкий рендеринг и тестирование всех вещей ».
Если FB действительно использует Jest, я могу только поблагодарить их за терпение, но вы редко увидите это упоминание в конференции. Когда я прочитал это , у меня было прозрение, а остальное уже история.
Это лучший способ проверить интерфейс. Нет DOM, очень мало зависимостей, просто взломайте Mocha и Assert, и у вас будут отличные , супер быстрые юнит-тесты, на которые вы можете положиться. Вы пройдете долгий путь, протестировав различные движущиеся части, что просто оставляет легкое функциональное тестирование дыма для подтверждения взаимодействия, приятно.
Построй его и они придут
Грэм Грант глотает после выпаса на холодном кусочке брокколи и говорит: «Как вы строите свое приложение без инструментов для сборки?».
Вы говорите: «С помощью узлов, скриптов npm и загрузчика модулей мой рабочий процесс значительно сокращен, но невероятно мощный».
Еще одна важная тема для меня — это то , что я использую webpack в качестве своего предпочтительного оружия, но jspm и Browserify — идеальные альтернативы, или все, что дает вам:
- Горячая перезагрузка: потому что мы супер ленивые разработчики и время это деньги
- Вавилонская интеграция: по причинам, на которые мы пойдем
- Минимизация, управление активами / поставщиками, хеширование ресурсов: потому что вы хотите, чтобы один крошечный кусок JS-кэша был запущен для запуска вашего прекрасного приложения
Я хочу, чтобы B-abel использовал ES2015
Oscar Old-School говорит: «Я использую ES5 с 2009 года, старые браузеры не поддерживают ES2015, классы в JS !? Спецификация меняется ежегодно, поэтапные предложения, такие как Object.observe, теряются во время их использования, Babel прекращает поддержку хорошо используемых функций и что с тремя точками …? ».
Вы говорите: «Для кого-то такой старой школы вы замечательно знакомы со всеми этими вещами и делаете некоторые хорошие замечания. Как вы упомянули Babel, вы знаете, что мы можем перейти к ES5, который работает во всех современных браузерах. Вам не нужно использовать каждую функцию в ES2015, и если вы используете предложенные функции, вы напрашиваетесь на неприятности. Три точки тоже потрясающие, распространяют любовь ».
Так, когда-то с 6 до 5 славы, когда он был написан ребенком на уроке истории (пока он не узнал, что Долли работала на три часа меньше), Бабель — это переход на JS, если вы не предпочитаете более галльские инструменты .
Это не является обязательным требованием (как, например, TypeScript не для Angular 2 ;-)), но написание всего вашего кода на ES2015 (сценические предложения для сторонних проектов) просто сделает ваш день намного лучше. Как только вы начнете разрушать, вы никогда не захотите останавливаться.
И да, в принципе лучше избегать классов, предпочтительнее составлять над наследованием, но … если вы расширяете только один раз и это делает ваши компоненты React более читабельными, используя идиоматический нативный код … возможно, мы просто пойдем с этим …
Изоморфная серверная часть предоставила универсальный JavaScript
Элли Андерсон говорит: «JavaScript — это все, что не так с интернетом. Эти динамические сайты не оптимизированы для SEO и сколько вложенных элементов вы хотите !? ».
Вы говорите: «Да, JS не должен использоваться для всего, но то, что я создаю, требует взаимодействия и хорошего UX, я все еще беспокоюсь о постепенном ухудшении и прогрессивном улучшении. Вот почему я рендую столько контента, сколько могу на стороне сервера, с семантическими элементами и постами форм, что дает мне SEO бесплатно ».
Обычно, когда люди используют изоморфный и универсальный рендеринг, они подразумевают рендеринг на стороне сервера, на который нацелен React, отделяя его основной движок от response-dom и response-dom / server.
В качестве небольшого предостережения, не слепо рендеринг на стороне сервера, потому что время на стекло быстрее. В зависимости от ситуации это может быть не так, когда речь идет о поездках туда-обратно, задержке, браузере, оборудовании и т. Д. И т. Д.
Ха, у меня есть код в моем коде … ох и немного жевательной резинки
Нет необходимости спорить вокруг этого, есть общий консенсус за столом и много кивок (даже от Алана), обязательна связь для совместной работы на основе общего кода. Не следует тратить время на проверку кода на точки с запятой и отступы; они должны быть о намерениях и архитектуре.
Теперь существует разница между качеством кода и стилем кода, качеством, ориентированным на лучшие практики кода, и стилем, сосредоточенным на… стилизации кода с помощью точек с запятой и тому подобного. Например, вы можете разделить эти задания с помощью JSCS и JSHint, но в настоящее время дорогой мир линтинга — ESLint .
Для React я использую конфигурацию Airbnb, которая использует это для своих бит Reacty. Вставьте это в свой сценарий пост-теста и объединяйте PR, как будто они выходят из моды.
Используемый случай
Sally Static говорит: «Я бы не использовал React для статического сайта, реального взаимодействия нет, и я получаю все, что мне нужно, от Jekyll ».
Вы говорите: «Вы пробовали Гэтсби ? Вы уверены, что не хотите перезарядки в своей жизни? ».
Можно утверждать, что использование React для всего является излишним, если вам не нужно взаимодействие и VDOM через 42 КБ JS, вы не должны его использовать. Однако… React — это не только VDOM, но и тестируемые кирпичи Lego. Если вы делаете что-то немного более простое, и вы не против написать JS, я бы рекомендовал использовать React *.
* или любая другая библиотека с философией компонентов, но эта статья о достоинствах React 😉
Конец начала
React поставляется с обширным сообществом и экосистемой, дополняющими единую библиотеку ответственности, а это означает, что вы можете просто добавить компонент на свой существующий сайт, что невозможно с помощью огромного фреймворка, или написать целое приложение с нуля.
React захватил мир 1 , WordPress соберет весь React 2 , вы должны использовать React 3 . Если вы ищете надежную библиотеку компонентов, которая не справляется с какой-либо задачей, то, надеюсь, эта статья предоставила вам достаточно ссылок и слов для google / sitepoint на следующий месяц.
Это похоже на кодирование в 90-х годах с целыми обновлениями страницы (хотя и оптимизированными на стороне клиента), встроенными стилями (хотя и не обязательно) и встроенными событиями (хотя и одним корневым событием )… и «HTML в вашем JS», но в этом нет ничего плохого 4
- это не имеет
- это не … пока
- нет, но это хорошая идея 😉
- в 90-х много чего не так, в этом выводе используется либеральная креативная лицензия