Что лучше jquery или react
React — это не новый jQuery
Это был тихий субботний день, когда я столкнулся с таким постом — React is the New JQuery (React — это новый jQuery). Я чувствовал, что было довольно много недоразумений, и подумал попытаться разрешить некоторые из поднятых в статье вопросов.
Я считаю, что обсуждение инструментов с точки зрения их крутости — это пустая трата времени и сил. Каждый инструмент разработан как ответ на улучшение решения распространённых проблем. Когда мы решаем одну проблему, возникают новые, которые, в свою очередь, требуют иных инструментов. Сами инструменты не вызывают сложности, они являются реакцией на более сложную работу, которой мы пытаемся заниматься.
Цель jQuery в основном заключалась в предоставлении единообразного способа решения проблем, связанными с кроссбраузерностью, а также обеспечить мощными инструментами управления DOM. Этот подход был основан на сервере, генерирующем HTML-страницу, а затем JS загружался на фронтенде для обработки взаимодействий пользователя. Вы можете создавать переключатели или любые компоненты для расширения возможностей браузера по умолчанию. Проблема с данным подходом заключается в том, что ваш пользовательский интерфейс заканчивается тем, что реализуется через клиент и сервер. Чаще всего это означает, что нам нужно два разработчика для реализации функциональных возможностей в двух местах — и на клиенте, и на сервере. Это занимает больше времени, больше общения и, скорее всего, приведёт к багам.
Вместо того, чтобы думать о React как способе реализации компонентов, подумайте о React как о самом пользовательском интерфейсе. Мы можем собрать пользовательский интерфейс из повторно используемых компонентов, которые создаём по ходу работы над приложением. Мы можем выполнять код таким же образом на сервере, как мы это делаем на клиенте. Это означает, что у нас наконец есть возможность реализовать весь наш пользовательский интерфейс на одном языке программирования. Это не только экономит значительное количество времени, но мы теперь свободны от багов, возникающих из-за того, что какая-нибудь одна из функций реализована в двух местах. Любые обновления теперь могут быть сделаны одним человеком.
React и Redux также приносят с собой ряд интересных идей, например как то, что пользовательский интерфейс является функцией состояния приложения. Мы больше не сохраняем состояние приложения в DOM, как это было бы с jQuery, поток состояния теперь изменился в обратную сторону. Состояние может находится в хранилище, а всем компонентам нужно сделать повторную отрисовку при каждом обновлении состояния. Хотя потребуется какое-то время, чтобы разобраться в этой концепции, но после этого ваш код станет легче для понимания.
Теперь я хотел бы рассмотреть некоторые из поднятых вопросов.
В то время как обработчики событий выглядят так, как будто они являются встроенными, это всего лишь синтаксис, используемый для их объявления. По факту они реализованы с использованием делегирования, таким образом 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!
Jquery или React?
Простой 5 комментариев
если реально можешь делать «тоже самое на Jquery», то ты невероятно крутой создатель костылей.
Сравниваешь тёплое с мягким.
TESTUSER376372, нет ничего такого, что можно сделать на реакте, и нельзя на jQuery.
Более того, в React гораздо выше порог вхождения.
Однако дело в скорости разработки проекта при хорошем знании технологий
В команде.
На длительном участке времени в десятки человеколет.
И с каждым этим уточнением React получает преимущества по сравнению с jQuery. А с последним уточнением и вовсе Angular.
React — это не новый JQuery
Дата публикации: 2018-06-22
От автора: это был тихий субботний день, когда я столкнулся с постом: React — это новый JQuery. Я чувствовал, что в нем было много недопонимания, и я подумал, что попытаюсь разрешить некоторые из поднятых вопросов.
Я считаю, что обсуждение инструментов React JQuery с точки зрения популярности является контрпродуктивным. Каждый инструмент разработан как ответ на лучшее понимание общих проблем. Когда мы решаем один вопрос, возникают новые, которые, в свою очередь, требуют новых инструментов. Сами инструменты не создают сложности, они являются ответом на сложную работу, которую мы пытаемся сделать проще.
Цель JQuery в основном заключалась в обеспечении единого решения кросс-браузерных проблем, и предоставлении мощных инструментов манипулирования DOM. Этот подход был основан на сервере, генерирующем HTML, а затем JS загружался в front-end для обработки взаимодействий пользователя. Вы можете создавать переключатели или любые компоненты для расширения функций браузера по умолчанию. Проблема с этим подходом заключается в том, что ваш пользовательский интерфейс заканчивается тем, что реализуется через клиент и сервер. Чаще всего это означает, что нам нужно два разработчика для реализации функции на двух сторонах. Это занимает больше времени, требует больше взаимодействия команды, что с большей вероятностью приводит к ошибкам.
Вместо того, чтобы представлять React, как способ реализации компонентов, представьте его, как сам пользовательский интерфейс. Мы можем составить его из повторно используемых компоненты, которые создаем по мере разработки. Мы можем запускать код на сервере таким же образом, как мы делаем это в клиенте. Это означает, что теперь мы можем реализовать весь наш пользовательский интерфейс на одном языке. Это не только экономит значительное количество времени, но и теперь нам больше не нужно беспокоиться о ошибках, возникающих из-за того, что одна функция реализована в двух местах. Любые обновления теперь могут быть сделаны одним человеком.
React и Redux также поставляются с некоторыми интересными идеями, такими как пользовательский интерфейс, как функция состояния приложения. Мы больше не сохраняем состояние приложения в DOM, как это было с JQuery, поток состояния теперь отменяется. Состояние может находиться в хранилище, и все компоненты должны выполнять повторную визуализацию при каждом обновлении состояния. Хотя на то, чтобы изучить эту концепцию, уйдет некоторое время, как только вы это сделаете, ваш код станет намного понятнее.
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
О некоторых особенностях React
Перепишите свою разметку, как JSX. Обязательно замените class на className, или все сломается.
Причиной этого является то, что JSX представляет собой JS-представление сегмента DOM, который выводит компонент. Мы не можем использовать class, потому что это зарезервированное ключевое слово в JavaScript, используемое для объявления классов ES6. className является не плохой альтернативой, поскольку это имя свойства, которое DOM-элементы используют для обозначения атрибута класса.
Встройте атрибут onClick, прикрепленный к JSX, который сопоставляется с функцией для обработки клика.
В то время как обработчики событий выглядят так, как будто они встраиваются, это только синтаксис, используемый для их объявления. Они фактически реализованы с использованием делегирования, в результате чего React применяет один прослушиватель событий в корне приложения для обработки всех событий. В результате наше приложение будет по-прежнему эффективным с большим количеством прослушивателей событий.
Одно сходство, которое React имеет с JQuery, заключается в том, что оба они обеспечивают одинаковое поведение событий во всех браузерах, что помогает сделать нашу жизнь немного легче.
Добавьте this.handleClick = this.handleClick.bind(this); для конструктора, чтобы заставить все работать.
Отвязка контекста является сложной темой и может завести создать проблемы даже для опытных разработчиков. Один из способов обойти эту проблему в React — использовать функции стрелок, как описано в //github.com/facebook/react/issues/9851.
Может быть, это только я так думаю, но все равно это кажется сравнительно более сложным и неэлегантным.
Это другой подход. Во многих случаях он будет лучше, но не всегда. Хотя может показаться, что это вводит дополнительную сложность в приложение, на мой взгляд, это фактически помогает нам справляться со сложностью, которая существует в больших приложениях. Я работал над приложениями React с более чем 100k строк кода, и на каждом шагу я вижу насколько полезным активом является React. Некоторым из проектов было бы очень сложно построить любым другим способом.
React может быть сложным, поскольку он предполагает не только другое мышление, он также требует глубокого понимания основ JavaScript. Если вас это интересует, я запускаю JavaScript-буткэмп в Лондоне, который охватывает именно этот материал. У нас еще осталось несколько мест в сентябрьской группе, и я хотел бы помочь вам справиться с React, а также всеми поддерживающими технологиями.
Автор: Dmitri Grabov
Редакция: Команда webformyself.
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
ReactJS: основы
Изучите основы ReactJS и создайте ваше первое приложение на ReactJS
jQuery против React
jQuery и React — популярные библиотеки JavaScript. Эти библиотеки значительно помогают и упрощают процесс интерфейсной веб-разработки. У них есть преимущества друг перед другом в зависимости от варианта использования и конкретных требований.
Давайте посмотрим на пошаговое сравнение между обеими библиотеками.
jQuery — это «запись меньше, делай больше » Библиотека JavaScript. Он упрощает сложные задачи JavaScript, превращая их в простые методы.
Первоначально jQuery был выпущен в 2006 году командой jQuery.
Первоначально React был выпущен Facebook в 2013 году.
T Размер библиотеки jQuery примерно на 18% меньше по сравнению с React. Хотя эта разница может показаться незначительной, она может существенно повлиять на время загрузки страницы.
Во время веб-разработки разработчики часто используют сторонние библиотеки JavaScript, написанные на jQuery или React. Эти сторонние библиотеки могут быть действительно полезными и обычно представлены в виде пакетов NPM (Node Package Manager). В React доступно значительно больше пакетов NPM по сравнению с jQuery. Это делает React более удобным, когда требуются сторонние библиотеки.
jQuery — это служебная библиотека, которая объединяет различные API-интерфейсы браузера. Он не предназначен специально для создания больших приложений. Если мы используем jQuery для больших приложений, мы можем столкнуться со следующими проблемами:
jQuery может побудить разработчиков создать «спагетти-код» для больших приложений, т. е. код со временем становится больше и сложнее, и его становится значительно труднее поддерживать.
Большие приложения состоят из огромных, сложное дерево DOM — традиционные обновления DOM замедляются со временем.
В отличие от jQuery, React — это библиотека управления компонентами. Это удобно для разработки приложений большого размера, потому что:
компонентно-ориентированная структура React требует, чтобы разработчики использовали рекомендуемые методики. Хотя это снижает некоторую гибкость, но помогает поддерживать код по мере увеличения размера приложения.
Использование виртуального DOM требует меньших затрат времени на обновления DOM. Это ускоряет процесс обновления DOM для больших приложений.
Что может крутого сделать React.js чего не может jQuery [закрыт]
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.
Всегда писал на jQuery. Но вот недавно сделал хелло ворлд на AngularJS, Angular2, React.js, Vue.js. И честно говоря не нашел в них ничего супер крутого. Скажите, пожалуйста, лучше с реальным примером — где jQuery проигрывает ReactJS. Желательно в связке с asp.net mvc/api
1 ответ 1
Реакт позволяет абстрагироваться от DOM и в этом большой плюс. Тестировать значительно проще.
Важно понять, что мы входим (русское сообщество ещё, судя по всему, входит, а мировое уже вошло) в эпоху компонентного веба. jquery в него не вписывается. Не зря гугл пропагандирует свои WebComponents. На данный момент это, кажется, ещё более экспериментальная вещь. Тем не менее, однозначно можно сказать, что компонентам быть, а дёрганию дома селекторами не быть.
Реакт становится многократно лучше со следующими технологиями (без них, я бы сказал, бессмысленно его трогать):
0) (от xFloooo) react-loadable упрощает асинхронную подгрузку кода (code-splitting)
Использование типизированного языка многократно облегчает задачу дебага реакт-компонентов, в ситуациях когда пропсы перебрасываются от одного компонента к другому, что может повторятся несколько раз подряд. тайпскрипт или флоу сразу же подскажут, какие пропсы поступают в неверном типе. Причём этот типа может быть не только простым скалярным, но и сложным интерфейсом.
4) recompose и паттерны hoc/react-composition/render props
5) styled-components + polished или, возможно, css-in-js типа aphrodite
6) jest для тестирования (вы же пишете тесты?)
7) Для redux-а существует большое количество библиотек, из них я бы хотел выделить
redux-form для форм
redux-fractal / redux-ui для локального стейта контейнеров (можно с лёгкостью использовать копии одного и того же стора (стейт/экшены/редьюсеры) для нескольких контейнеров.
react-sortable-hoc для быстрого dnd в рамках одного списка