LINUX.ORG.RU

Мужики, объясните по React.js!

 , ,


1

1

Всем доброго времени суток!

В последнее время я все чаще стал натыкаться на статьи, посвященные библиотеке React.js, которая реализует слой view для веб-приложений. говорят, что этот самый реакт быстр как сатана (в хорошем смысле) :). Но я, будучи незнакомым с внутренним устройством реакта, засомневался, как может какая-то высокоуровневая обертака над DOM (а точнее над виртуальным дом'ом) работать быстрее, чем, скажем, шаблонизатор в underscore, который «ворочает» непосредственно _реальный_ DOM?

Вопрос, какой код будет рабоать быстрее (объективно), который манипулирует реальным домом или аналогичный код, который сначала манипулирует виртуальным, а затем уже встраивается в реальный DOM?

Заранее спасибо.

или аналогичный код, который сначала манипулирует виртуальным, а затем уже встраивается в реальный DOM?

this.

Vit ★★★★★ ()
Ответ на: комментарий от Kilte

Да, спасибо за ссылку, прояснил кое-какие момнеты для себя. Интересно все же, на колько react быстрее обочной манипуляции с dom?

KernelPanic ()

шаблонизатор в underscore, который «ворочает» непосредственно _реальный_ DOM

Проблема в том, что шаблонизатор из underscore ворочает не DOM, а просто HTML-код, который затем просто заменяет текущий в базовом элементе, а далее движок браузера снова должен распарсить этот новый код, применить все стили и вывести на странице. Вот именно данный процесс обработки HTML-кода и является узким местом в производительности.

static_lab ★★★★★ ()
Ответ на: комментарий от KernelPanic

Не могу сказать. Не мерял. Но очевидно, что чем больше элементов подвергается изменению, тем более заметна разница.

Kilte ★★★★★ ()

Вопрос, какой код будет рабоать быстрее (объективно), который манипулирует реальным домом или аналогичный код, который сначала манипулирует виртуальным, а затем уже встраивается в реальный DOM?

В общем случае послледний, в данном случае, как ни стронно виталик не обосрался, удивлению нет предела, видимо пойдет дожь. Это происходит по простейшей причине. Операции с домом всегда влекут за собой перерисовку, а она дорогая. Всегда выгодней по перформансу, выстроить новый кусок дома, а затем заменить его одной перерисовкой, это аксиома.

aboutcard ()

Реакт не про скорость и не быстрее для случаев, когда ты действительно все делаешь руками в доме(а не используешь какой то фреймворк без vdom наример).

zz ★★★★ ()

Помнится, Atom отказался от React именно по причине недостатка производительности. Так ли он быстр?

tired_eyes ()
Ответ на: комментарий от th3m3

К ангуляру свои претензии, так-то он быстр, но когда в DOM-е пара тысяч элементов, производительность проседает.

tired_eyes ()
Ответ на: комментарий от tired_eyes

Выходит Реакт лучше? Я просто думаю между Ангуляром и Реактом.

th3m3 ★★★★★ ()
Ответ на: комментарий от th3m3

Это просто разные вещи. React это просто View в MVC, Angular - кое-что еще.

tired_eyes ()
Ответ на: комментарий от tired_eyes

К ангуляру свои претензии, так-то он быстр, но когда в DOM-е пара тысяч элементов, производительность проседает.

Во-первых, имелись в виду не DOM-элементы, а ангуляровские вотчеры. Но с тех пор уже очень много времени прошло, и производительность ангуляра значительно выросла. Наблюдался однажды случай в 420 тыс. вотчеров на странице (!) Говнокод, конечно, но ангуляр вытянул.

static_lab ★★★★★ ()
Ответ на: комментарий от menangen

Может он и неплох, но все хотят распиаренные Ангуляры или Реакты)

th3m3 ★★★★★ ()
Ответ на: комментарий от static_lab

Не понятно почему вотчеры которые не трогают дом должны тормозить. Жаваскрипт так то достаточно быстрый язык.

zz ★★★★ ()
Ответ на: комментарий от zz

Не понятно почему вотчеры которые не трогают дом должны тормозить

Так в том-то и дело, что «тормоза на 2000 вотчеров» - основной аргумент в холиварах реакт vs ангуляр.

static_lab ★★★★★ ()
Ответ на: комментарий от static_lab

Это понятно, но твой пример не очень опровергает этот кейс, потому что в общем случае количество вотчеров слабо коррелирует с количеством мутаций дома.

zz ★★★★ ()
Ответ на: комментарий от th3m3

Не знаю, мы в команде с американцами отказались от реакта - я вообще втыкал долго в него и не понял что там такого охрененного, и до сих пор аж противно становится от всех этих многослойных дубо-фреймверков. Рактив ещё куда не шло, гораздо человечнее спроектирован, ну про ангулар - я в нём не силён, но по простоте и архитектуре, имхо, он гораздо лучше реакта.

menangen ★★★★★ ()
Последнее исправление: menangen (всего исправлений: 1)

По скорости на всяких простых проектах типа интернет магазина на 5000 товаров - ты не заметишь разницы между реактом и андескоре шаблонизатором / бэкбоном. Вообще, бэкбон и его побратим эмбер - самое то, если не охота учить монстры типа ангулара. Но, всё же ангулар поковырять я рекомендую для общего развития.

menangen ★★★★★ ()
Ответ на: комментарий от menangen

А мне реакт показался черезчур многословным. Намного больше понравился Рактив с гитхаба.

Однако пример с ToDo у последнего представляет объемистую лапшу. Как так то?

A1 ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.