Можно ли редактировать компоненты React без перезагрузки браузера?

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

Я ищу решение, которое позволяет мне редактировать файл JSX, сохранять его и обновлять сам компонент в браузере, не перезагружая страницу, размонтировать ее или потерять ее состояние.

в идеале это должно работать без дополнительных плагинов браузер.

6
hotswap javascript livereload reactjs

2 ответов

можно использовать react-hot-loader, drop-in Webpack loader, который позволяет редактировать компоненты React в ваших проектах. Нет плагинов браузера или IDE крючки не требуется.

он женится Webpack Замена Горячего Модуля (HMR) с React.

вы можете использовать это, если:

  • ваши реагирующие компоненты не имеют неприятных побочных эффектов;
  • вы готовы переключиться на Webpack для модули (это не трудно переключить,см. В руководстве);
  • у вас есть пара свободных часов (минут, если вы уже используете Webpack).

как работает:

есть демо-видео, an толковый блог и реагировать учебник приложение вилка с live-edit настроен.

и это все ваниль JS.

12

вы можете, и я создал пример проекта, демонстрирующий, как создать эти средства для себя, используя ES5 и RequireJS - он работает с React, а также с магистралью - он, вероятно, может работать с Angular и Ember и т. д., Если вы используете модули AMD и RequireJS.

вот вся информация: https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

основные шаги:

  1. залпом.Яш наблюдатели прослушивают изменения файловой системы

  2. розетка.io сервер в gulpfile отправляет сообщение всем клиентам браузера с путем файла, который изменился

  3. клиент удаляет кэш, представляющий этот файл / модуль, и повторно требует его (используя AJAX, чтобы вытащить его из файловой системы сервера)

  4. front-end app настроен / предназначен для переоценка всех ссылок на модули, которые он желает hot-reload, в этом случае, только представления JS, шаблоны и CSS доступна горячая перезагрузка-маршрутизатор, контроллеры, хранилища данных еще не настроены. Я подозреваю, что все файлы могут быть перегружены, за исключением хранилищ данных.

вы можете увидеть пример проекта здесь: https://github.com/ORESoftware/hr4R

но я рекомендую сначала прочитать статью выше.

Это более простая реализация горячей перезагрузки DIY, чем использование Babel / ES6 и React-горячий загрузчик.

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

спецификация RequireJS / AMD была в основном составила для горячей перезагрузки, если вы думаете об этом.

0