3

Можно ли ReactJs использовать не в SPA приложениях? Т.е., рендер html производит сервер (PHP), а React только для динамических интерфейсов над этим отрендеренным сервером представлением - что то вроде, как сейчас с jQuery.

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

Изоморфное приложение - это вроде тоже SPA, с рендерингом на сервере средствами ReactJs, а меня интересует именно та ситуация, когда типовой рендеринг html на сервере средствами (php) и динамика на стороне клиента - как это было раньше через jQuery.

Можно ли как-то реализовать это с ReactJs?

0

1 ответ 1

5

Можно и нужно :) Хоть и поначалу очень непривычно.

Основа React - компоненты, а не приложения целиком. Компонент содержит в себе логику для генерации его отображения в виде html(метод render()), хранит свойства и дочерние компоненты, а так же получает и обрабатывает внешние и внутренние события.

Вас абсолютно никто не заставляет делать типичный для SOA гигантский компонент "приложение", использующий абсолютно все написанные вами компоненты, и отоброжающийся на всю площадь страницы. Никто не навязывает использование маршрутизации - react-route поставляется как отдельный, независимый пакет.

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

Всё очень просто:

  1. Ваш бекенд выдаёт статичную html-страничку
  2. В фронтенде пишете React-компоненты для самых небольших частей приложения - кнопочек, переключателей, полей ввода, блоков для отображения и т.д - для всего, чему нужно добавить "динамичность".
  3. Из статичных html-элементов извлекаете нужные вам значения, и рендерите React-компоненты прямо вместо этих элементов, передавая извлеченные значения в конструктор.
2
  • 2
    Вот по этой схеме получаются следующая ситуация:1. Сервер рендерит html (НЕ ReactJs) представление, ВСЕЙ страницы. 2. Клиент (компонент ReactJs) рендерит отдельный элемент этого представления пришедшего с сервера, например "фильтр товаров". И тут получается однв большая проблема: Если через время придется править html представление этого 'фильтра товаров', то это придется одновременно делать в двух местах, на сервере и на клиенте в компоненте ReactJs. А если таких динамических фрагментов в представлении 30-40 на одной странице, а страниц 20-30 в приложении, то это как бы ужас. Ведь так? 18 янв 2016 в 11:16
  • 2
    Если же править html этого "фильтра товаров" только в компоненте ReactJs на клиенте, то после рендеринга html всей страницы на сервере, ReactJs комопнент этого "фильтра товаров" увидит, что представление не совпадает с его рендерингом и заменит его в DOM. И это повлечет за собой: 1. Это увеличит время загрузки страницы; 2. Если у пользователя в браузере отключен JS, то результат будет печальным. 18 янв 2016 в 11:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.