Почему у React.js такая ужасная модель управления DOM? Как с этим уживаться?

Question

[Itvanya]

Всем привет! Сразу предупреждаю - это не холивар. Я долгое время писал код на ванильном JS, изощренно используя паттерны проектирования и сдавая проекты на ура. ДОМом за эти годы я научился пользоваться неплохо : писал немало плагинов разных скроллеров, прокруток, параллаксов, фильтраций списков.
И вот пришел реакт на рынок в виде тренда. Согласен, реактом + redux удобно пользоваться тогда, когда у нас есть статичность в ДОМ, а реакт-редакс просто отдает свой кусок какой-то информации в компонент. Недавно мне потребовалось переписывать один из наших проектов, которые мы поддерживаем с давних времен, и пришлось это делать с react + redux (требование заказчика). Когда я начал писать аудио-плеер с кучей кастомных скроллбаров, тайм-баров и т.д. у меня просто кровь из глаз пошла от того, какую модель управлением ДОМа предоставлять React. И да, Redux тут не спасает. Приходится постоянно пользоваться EventEmitter'ами, отказываться от инкапсуляции компонентов, чтобы расшарить ref для всех дочерних элементов. Это действительно большой гемморой, когда нужно получить свойства элемента, который не является членом родственной связи компонента.
Мой вопрос состоит в том, как вы, уважаемые люди, относитесь к этой модели и как перестать плюваться от нее? Читаю документацию от Фейсбука уже сотый раз, но никак до сих пор не вникну в то, как действительно эффективно работать с DOM в React. Жду вашей помощи.

Comments

[Никита]

Забыл про refs и все норм. Просто подумайте как сделать ваше приложение без refs, сначала покажется странным, потом привыкните.

[Антон]

а я согласен. да, я не использую reft и redux для работы с DOM, пробовал react-motion и прочее, и это мне совсем не нравится. анимация в полимер, скажем, куда более понятнее и легче как для понимания, так и для использования имхо

[Ninja Mate]

согласен, сам запарился свойства и функции перебрасывать и да через refs

Answer 1

[Mikhail Osher]

refs, EventEmitter - говорят о том, что у Вас проблема с построением архитектуры приложения и непонимание dataflow в redux в целом.

Посмотрите на одну из реализаций аудиоплееров, возможно подчерпнете что-то.

https://github.com/andrewngu/sound-redux

Answer 2

[fetis26]

Попробую поиграть в телепата. Пару моментов.

Первое, Redux не имеет никакого отношения к DOM. Это просто хранилище вашего состояния. Собственно для отдельного компонента я вообще не уверен, что нужен Redux

Второе. Передача refs это какой-то очень странный подход. Компонент на действие должен либо поменять свое состояние, либо дернуть колбек чтобы поменять состояние окружения. Все. Любой дальнейший рендер опирается на состояние.