От автора: это был тихий субботний день, когда я столкнулся с постом: React — это новый JQuery. Я чувствовал, что в нем было много недопонимания, и я подумал, чтобы попытаюсь разрешить некоторые из поднятых вопросов.
Я считаю, что обсуждение инструментов React JQuery с точки зрения популярности является контрпродуктивным. Каждый инструмент разработан как ответ на лучшее понимание общих проблем. Когда мы решаем один вопрос, возникают новые, которые, в свою очередь, требуют новых инструментов. Сами инструменты не создают сложности, они являются ответом на сложную работу, которую мы пытаемся сделать проще.
Цель JQuery в основном заключалась в обеспечении единого решения кросс-браузерных проблем, и предоставлении мощных инструментов манипулирования DOM. Этот подход был основан на сервере, генерирующем HTML, а затем JS загружался в front-end для обработки взаимодействий пользователя. Вы можете создавать переключатели или любые компоненты для расширения функций браузера по умолчанию. Проблема с этим подходом заключается в том, что ваш пользовательский интерфейс заканчивается тем, что реализуется через клиент и сервер. Чаще всего это означает, что нам нужно два разработчика для реализации функции на двух сторонах. Это занимает больше времени, требует больше взаимодействия команды, что с большей вероятностью приводит к ошибкам.
Вместо того, чтобы представлять React, как способ реализации компонентов, представьте его, как сам пользовательский интерфейс. Мы можем составить его из повторно используемых компоненты, которые создаем по мере разработки. Мы можем запускать код на сервере таким же образом, как мы делаем это в клиенте. Это означает, что теперь мы можем реализовать весь наш пользовательский интерфейс на одном языке. Это не только экономит значительное количество времени, но и теперь нам больше не нужно беспокоиться о ошибках, возникающих из-за того, что одна функция реализована в двух местах. Любые обновления теперь могут быть сделаны одним человеком.
React и Redux также поставляются с некоторыми интересными идеями, такими как пользовательский интерфейс, как функция состояния приложения. Мы больше не сохраняем состояние приложения в DOM, как это было с JQuery, поток состояния теперь отменяется. Состояние может находиться в хранилище, и все компоненты должны выполнять повторную визуализацию при каждом обновлении состояния. Хотя на то, чтобы изучить эту концепцию, уйдет некоторое время, как только вы это сделаете, ваш код станет намного понятнее.
О некоторых особенностях React
Перепишите свою разметку, как JSX. Обязательно замените class на className, или все сломается.
Причиной этого является то, что JSX представляет собой JS-представление сегмента DOM, который выводит компонент. Мы не можем использовать class, потому что это зарезервированное ключевое слово в JavaScript, используемое для объявления классов ES6. className является не плохой альтернативой, поскольку это имя свойства, которое DOM-элементы используют для обозначения атрибута класса.
Встройте атрибут onClick, прикрепленный к JSX, который сопоставляется с функцией для обработки клика.
В то время как обработчики событий выглядят так, как будто они встраиваются, это только синтаксис, используемый для их объявления. Они фактически реализованы с использованием делегирования, в результате чего React применяет один прослушиватель событий в корне приложения для обработки всех событий. В результате наше приложение будет по-прежнему эффективным с большим количеством прослушивателей событий.
Одно сходство, которое React имеет с JQuery, заключается в том, что оба они обеспечивают одинаковое поведение событий во всех браузерах, что помогает сделать нашу жизнь немного легче.
Добавьте this.handleClick = this.handleClick.bind(this); для конструктора, чтобы заставить все работать.
Отвязка контекста является сложной темой и может завести создать проблемы даже для опытных разработчиков. Один из способов обойти эту проблему в React — использовать функции стрелок, как описано в https://github.com/facebook/react/issues/9851.
Может быть, это только я так думаю, но все равно это кажется сравнительно более сложным и неэлегантным.
Это другой подход. Во многих случаях он будет лучше, но не всегда. Хотя может показаться, что это вводит дополнительную сложность в приложение, на мой взгляд, это фактически помогает нам справляться со сложностью, которая существует в больших приложениях. Я работал над приложениями React с более чем 100k строк кода, и на каждом шагу я вижу насколько полезным активом является React. Некоторым из проектов было бы очень сложно построить любым другим способом.
React может быть сложным, поскольку он предполагает не только другое мышление, он также требует глубокого понимания основ JavaScript. Если вас это интересует, я запускаю JavaScript-буткэмп в Лондоне, который охватывает именно этот материал. У нас еще осталось несколько мест в сентябрьской группе, и я хотел бы помочь вам справиться с React, а также всеми поддерживающими технологиями.
Автор: Dmitri Grabov
Источник: https://medium.com/
Редакция: Команда webformyself.