Можно ли редактировать компоненты React без перезагрузки браузера?
Если React предлагает согласование DOM,можно ли динамически перезагрузить код компонента и повторно отобразить его после того, как я изменить его?
Я ищу решение, которое позволяет мне редактировать файл JSX, сохранять его и обновлять сам компонент в браузере, не перезагружая страницу, размонтировать ее или потерять ее состояние.
в идеале это должно работать без дополнительных плагинов браузер.
2 ответов
можно использовать react-hot-loader, drop-in Webpack loader, который позволяет редактировать компоненты React в ваших проектах. Нет плагинов браузера или IDE крючки не требуется.
он женится Webpack Замена Горячего Модуля (HMR) с React.
вы можете использовать это, если:
- ваши реагирующие компоненты не имеют неприятных побочных эффектов;
- вы готовы переключиться на Webpack для модули (это не трудно переключить,см. В руководстве);
- у вас есть пара свободных часов (минут, если вы уже используете Webpack).
как работает:
- он использует webpack HMR API, чтобы узнать о событии "обновление модуля доступно".
- происходит
React.createClass
звонки на специальныеcreateClass
иupdateClass
функции сохраните прототип компонента и позже обновите его свежим версия; - когда все прототипы обновляются, он называет
forceUpdate
для повторного отображения компонентов.
есть демо-видео, an толковый блог и реагировать учебник приложение вилка с live-edit настроен.
и это все ваниль JS.
вы можете, и я создал пример проекта, демонстрирующий, как создать эти средства для себя, используя ES5 и RequireJS - он работает с React, а также с магистралью - он, вероятно, может работать с Angular и Ember и т. д., Если вы используете модули AMD и RequireJS.
вот вся информация: https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
основные шаги:
залпом.Яш наблюдатели прослушивают изменения файловой системы
розетка.io сервер в gulpfile отправляет сообщение всем клиентам браузера с путем файла, который изменился
клиент удаляет кэш, представляющий этот файл / модуль, и повторно требует его (используя AJAX, чтобы вытащить его из файловой системы сервера)
front-end app настроен / предназначен для переоценка всех ссылок на модули, которые он желает hot-reload, в этом случае, только представления JS, шаблоны и CSS доступна горячая перезагрузка-маршрутизатор, контроллеры, хранилища данных еще не настроены. Я подозреваю, что все файлы могут быть перегружены, за исключением хранилищ данных.
вы можете увидеть пример проекта здесь: https://github.com/ORESoftware/hr4R
но я рекомендую сначала прочитать статью выше.
Это более простая реализация горячей перезагрузки DIY, чем использование Babel / ES6 и React-горячий загрузчик.
Webpack не был в первую очередь предназначен для горячей перезагрузки-если бы это было так, горячая перезагрузка больше не была бы экспериментальной функцией, а также не использовала бы опрос для просмотра различий файловой системы, что она в настоящее время делает (см. мою статью).
спецификация RequireJS / AMD была в основном составила для горячей перезагрузки, если вы думаете об этом.