Если React предлагает согласование DOM, можно ли динамически перезагружать код компонента и повторно отображать его после того, как я его отредактирую?
Я ищу решение, которое позволяет мне редактировать файл JSX, сохранять его и обновлять сам компонент в браузере, не перезагружая страницу, не отключая ее и не теряя ее состояния.
В идеале это должно работать без плагинов для браузера.
Вы можете использовать react-hot-loader, -in загрузчик Webpack, который позволяет редактировать компоненты React в ваших проектах в режиме реального времени. Никаких плагинов для браузера или хуков IDE не требуется.
Он объединяет горячую замену модуля (HMR) Webpack с React.
Вы можете использовать это, если:
Как это работает:
React.createClass вызовы специальных функций createClass и updateClass, которые сохраняют прототип, а затем обновить его новой версией;forceUpdate для повторного рендеринга компонентов.Существует демонстрационное видео, пояснительный пост в блоге и Вилка обучающего приложения React с настроенным живым редактированием.
И это все ванильный JS.
Вы можете, и я создал пример проекта, демонстрирующий, как создавать эти средства для себя, используя ES5 и RequireJS — он работает с React, а также с Backbone — возможно, он может работать с Angular и Ember и т. д., если вы используете модули AMD и RequireJS. .
Вот вся информация: https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
основные шаги:
Наблюдатели gulp.js прослушивают изменения файловой системы
Сервер socket.io в файле gulpfile отправляет сообщение всем клиентам браузера с путем к измененному файлу
клиент удаляет кеш, представляющий этот файл/модуль, и повторно требует его (используя AJAX для извлечения его из файловой системы сервера)
внешнее приложение настроено/предназначено для повторной оценки всех ссылок на модули, которые оно хочет перезагрузить в горячем режиме, в этом случае для горячей перезагрузки доступны только представления JS, шаблоны и CSS — маршрутизатор, контроллеры, хранилища данных не настроен еще. Я подозреваю, что все файлы могут быть перезагружены в горячем режиме, за исключением хранилищ данных.
Вы можете увидеть пример проекта здесь: https://github.com/ORESoftware/hr4R
но я рекомендую сначала прочитать статью выше.
Это более простая реализация горячей перезагрузки своими руками, чем использование Babel/ES6 и React-Hot-Loader.
Webpack изначально не был разработан для горячей перезагрузки — если бы это было так, горячая перезагрузка больше не была бы экспериментальной функцией, и при этом он не использовал бы опрос для просмотра различий файловой системы, что он делает в настоящее время (см. мою статью).
Спецификация RequireJS/AMD в основном была создана для горячей перезагрузки, если подумать.
