Макс Лапшин (levgem) wrote,
Макс Лапшин
levgem

Category:
Немного расскажу про React.js, раз уже можно сравнить его с Ангуляром.

Для начала небольшая вводная для тех, кто не в курсе. Это два яваскриптовых фреймворка, которые пытаются решить задачу упорядочивания кода и бардака на одном из самых ублюдочных сегодняшних языков: яваскрипте. Проблема решается действительно сложная: нужно написать интерактивную прослойку между сетью (данные из html+аякс+вебсокеты) и клиентом, при этом здорово дублируя серверную логику.



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

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


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

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


Другой способ, который предлагают авторы реакта — flux подход (рефлюкс и прочие шмуксы). Идея в том, что отказываемся от иммутабельного рендеринга компонент с помощью параметров конструктора (props), а замещаем это на подписывание на внутренний паб-саб и из него получаем временные данные (state). Когда надо что-то поменять, то не коллбеки спускаем, а пишем в этот паб-саб. Мне этот подход не нравится, потому что в итоге всё заканчивается глобальными переменными: каждый контрол сам умничает на тему того, как и куда ему сообщать о событиях и откуда брать данные. Плюс отказываться от иммутабельного рендеринга по props — это фактически от реакта отказываться.

Подходы можно комбинировать, но отказаться от протаскивания коллбеков, я считаю, невозможно.
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 17 comments