Перевод статьи Dmitri Grabov: React is not the new JQuery.
Это был тихий субботний день, когда я столкнулся с таким постом — React is the New JQuery (React — это новый jQuery). Я чувствовал, что было довольно много недоразумений, и подумал попытаться разрешить некоторые из поднятых в статье вопросов.
Я считаю, что обсуждение инструментов с точки зрения их крутости — это пустая трата времени и сил. Каждый инструмент разработан как ответ на улучшение решения распространённых проблем. Когда мы решаем одну проблему, возникают новые, которые, в свою очередь, требуют иных инструментов. Сами инструменты не вызывают сложности, они являются реакцией на более сложную работу, которой мы пытаемся заниматься.
Цель jQuery в основном заключалась в предоставлении единообразного способа решения проблем, связанными с кроссбраузерностью, а также обеспечить мощными инструментами управления DOM. Этот подход был основан на сервере, генерирующем HTML-страницу, а затем JS загружался на фронтенде для обработки взаимодействий пользователя. Вы можете создавать переключатели или любые компоненты для расширения возможностей браузера по умолчанию. Проблема с данным подходом заключается в том, что ваш пользовательский интерфейс заканчивается тем, что реализуется через клиент и сервер. Чаще всего это означает, что нам нужно два разработчика для реализации функциональных возможностей в двух местах — и на клиенте, и на сервере. Это занимает больше времени, больше общения и, скорее всего, приведёт к багам.
Вместо того, чтобы думать о React как способе реализации компонентов, подумайте о React как о самом пользовательском интерфейсе. Мы можем собрать пользовательский интерфейс из повторно используемых компонентов, которые создаём по ходу работы над приложением. Мы можем выполнять код таким же образом на сервере, как мы это делаем на клиенте. Это означает, что у нас наконец есть возможность реализовать весь наш пользовательский интерфейс на одном языке программирования. Это не только экономит значительное количество времени, но мы теперь свободны от багов, возникающих из-за того, что какая-нибудь одна из функций реализована в двух местах. Любые обновления теперь могут быть сделаны одним человеком.
React и Redux также приносят с собой ряд интересных идей, например как то, что пользовательский интерфейс является функцией состояния приложения. Мы больше не сохраняем состояние приложения в DOM, как это было бы с jQuery, поток состояния теперь изменился в обратную сторону. Состояние может находится в хранилище, а всем компонентам нужно сделать повторную отрисовку при каждом обновлении состояния. Хотя потребуется какое-то время, чтобы разобраться в этой концепции, но после этого ваш код станет легче для понимания.
Теперь я хотел бы рассмотреть некоторые из поднятых вопросов.
Перепишите свою разметку на JSX. Обязательно замените атрибут
classнаclassName, иначе ничего не заработает.
Причина в том, что JSX представляет собой JS-представление сегмента DOM, который выводит наш компонент. Мы не можем использовать class, потому что это зарезервированное ключевое слово в JavaScript, используемое для объявления классов, появившихся в ES6. className — неплохая альтернатива, поскольку это имя свойства, которое DOM-элементы используют для обозначения атрибута класса.
Встроенный атрибут
onClick, добавляемый к вашему JSX, сопоставляется с функцией для обработки щелчка мыши.
В то время как обработчики событий выглядят так, как будто они являются встроенными, это всего лишь синтаксис, используемый для их объявления. По факту они реализованы с использованием делегирования, таким образом React применяет один-единственный обработчик событий в корне приложения для обработки всех событий. В результате наше приложение будет по-прежнему эффективным и высокопроизводительным даже с большим количеством обработчиков событий.
Одно сходство, которое React имеет с jQuery — это то, что они оба гарантируют одинаковую работоспособность событий во всех браузерах, что пытается сделать нашу жизнь немного легче.
Добавьте
this.handleClick = this.handleClick.bind(this);в конструктор, чтобы вызов метода класса заработал.
Контекстное разыменование — сложная тема и может подловить даже опытных разработчиков. Один из способов обойти эту проблему в React — использовать стрелочные функции, как описано в этом ишью.
Это может быть только для меня, но React кажется сравнительно более сложным и неэлегантным.
Это другой подход. Во многих случаях он будет лучше, но не всегда. Хотя может показаться, что его использование осложняет наше приложение, но на мой взгляд он на самом деле помогает нам справляться со сложностью, которая существует в больших приложениях. Я работал над приложениями, созданными с помощью React с более чем ста тысяч строк кода и на каждом шагу React был огромной помощью и играл важную роль. Некоторые проекты было бы сложно реализовать любым другим способом.
React может быть сложным, поскольку предполагает не только смену подхода к разработке, но также требует глубокого понимания основ JavaScript. Если вас это интересует, я запускаю учебную программу по JavaScript в Лондоне, которая охватывает именно эту тему. У нас ещё осталось несколько мест в нашей сентябрьской группе, и я хотел бы помочь вам справиться с изучением React, а также со всеми сопутствующими технологиями.
Примечание переводчика: а для всех тех, кто не живёт в Лондоне, но хочет изучить React на базовом уровне, предлагаю прочитать небольшую бесплатную книгу «Путь к изучению React». Это перевод известной книги «The Road to learn React», которая переведена на четыре языка, а буквально недавно был закончен перевод на русский язык. Так что, если вы или кто-нибудь из вашего круга общения не знают React, но хотят его изучить, то эта книга будет отличным стартом для погружения в мир React!
Слушайте наш подкаст в iTunes и SoundCloud, читайте нас на Medium, контрибьютьте на GitHub, общайтесь в группе Telegram, следите в Twitter и канале Telegram, рекомендуйте в VK и Facebook.