Отдельные элементы на странице?

Question

[to_east]

На странице имеются елементы которые необходимо менять динамически, к примеру:
Счетчик лайков под постом и под каждым комментом от пользователей.
В общем понятно что можно при помощи банального jQuery этого достич. Но как организовать код более структурированно?
Будет ли целесообразно использовать React компоненты под каждым таким элементом, другими словами, имеем кусок html:

<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>

Каждый див это отдельное приложение Реакта, насколько много можно наплодить таких приложух на странице и как это сказывается на производительности браузера.
Еще посмотрел библиотеку https://dojotoolkit.org тоже имеет удобные средства для манипуляциями Dom'а, что скажете?

Comments

[davidnum95]

Каждый див это отдельное приложение Реакта,

не надо так

[to_east]

Почему? Потому что сейсмическая активность высокая в этот период?
Вот здесь https://github.com/reduxjs/react-redux/issues/355 говорят что это нормально, да и на stackoverflow тоже попадаются похожие запросы, на что отвечают что использование такого подхода - не редкость

[davidnum95]

to_east, потому что для этого придуман механизм порталов.

Answer 1

[Андрей]

Вполне себе можно. Мы таким образом постепенно переводим большое приложение c mvc на api based на реакте. Только, скорее, это не отдельные реакт-приложения, а просто несколько разных точек входа одного. Вы же не заводите реакт каждый раз. Просто реакт-дом зарендерит чтото в несколько разных дивов. Почему бы и нет. В конце концов, они все дружно смотрят в 1 редакс-стор и вполне себе могут общаться через него. Когда перевели страницу на реакт целиком - объединяем в одну точку входа. Никаких проблем, в плане производительности в том числе, пока что замечено не было.

Answer 2

[Stopy]

Не занимайтесь преждевременной оптимизацией, да, вы можете использовать компоненты под каждым таким элементом. Можете еще взглянуть на Vue.js, решить на чем будет проще писать и поддерживать.

Answer 3

[s-jet]

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

Comments

[to_east]

Опять ответ в стиле Кашпировского)

[s-jet]

to_east, ну если более подробно, то целесообразно сделать следующим образом:
Основой контейнер в него Компонент все посты

Далее структура:
Компонент все посты
-> Компонент пост
-> Компонент все камменты к посту
-> Компонент каммент

Каждый компонент будет накапливать лайки сам по себе

[to_east]

Да не я понял, вы предлагаете отрисовывать все на клиенте все включая посты и коммены, но мне этого не нужно, бэкенд нормально все рендерит. Вопрос в другом - с чего нельзя плодить аппликейшены на одной странице, это как то влияет на производительность? У каждого приложения же скоуп изолирован от других или нет? К тому же каждое приложение не тяжелое, два события на каждый элемент и один запрос к апи.