У меня есть приложение для реагирования/уменьшения, и когда файл изменяется, и я нажимаю «Сохранить», он обновляет страницу и очищает все данные о сокращении. Я знаю, что могу сохранить данные о сокращении в локальном хранилище. Что мне хотелось бы знать, так это то, что сервер реакции/узла по умолчанию обновляет страницу при изменении файла? Если нет, то как я могу предотвратить это?
страница обновляется при изменении файла реагировать
Ответы (1)
Это поведение по умолчанию? : Да, это так.
Это известно как live-reloading, когда изменение в вашем файле обновляет ваш локальный сервер и перезапускает приложение, устанавливая все состояния на начальные.
Но проблема, как вы упомянули, заключается в том, что состояние приложения теряется.
Есть еще одна концепция, называемая hot-reloading, которая предотвращает это. Горячая перезагрузка просто заменит модули, которые изменились во время работы приложения. Это не приведет к полному обновлению приложения. Он просто обновит страницу с изменениями без перезагрузки и, таким образом, сохранит состояние приложения. Однако состояние компонента, то есть состояние реакции, не сохраняется.
Теперь, когда вы создаете реактивный проект с помощью CRA, встроена функция горячей перезагрузки. Вы можете попробовать ее, запустив приложение и изменив некоторые файлы css. Вы заметите, что приложение не обновляется, но изменения применяются!!
Однако, если вы попытаетесь сделать это в файле JSX, изменится все приложение. Это связано с тем, что необходимо внести некоторые изменения, чтобы включить горячую перезагрузку в файле JSX.
Перейдите к index.js и напишите эту строку кода:
if (module.hot && process.env.NODE_ENV !== 'production') {
module.hot.accept();
}
Если вы пойдете и внесете изменения в свой файл JSX сейчас, вы увидите, что обновления применяются без обновления.
НО, состояние реакции не поддерживается. Существует библиотека под названием react-hot-loader, которая также может помочь вам в поддержании состояния реакции. Попробуйте!
person
Rohan Agarwal
schedule
11.07.2020
спасибо @Rohan за быстрый ответ, я помню, что он не обновлял страницу, но тогда я не знаю, что произошло. Я даже пытался переустановить хром, удалить модули узлов и установить их снова, но ничего не получилось :(
- person sparrow2; 11.07.2020
Извините, не понял вас. Вы пытались добавить код, упомянутый выше, в свой файл index.js или index.ts? Это предотвратит обновление приложения.
- person Rohan Agarwal; 11.07.2020
да, я добавил, и это, кажется, работает, но, как вы сказали, состояния реакции не будут сохранены?
- person sparrow2; 11.07.2020
Да, для этого, как я уже говорил, вам нужно использовать плагин react-hot-loader и внести некоторые изменения в конфигурацию. Вы можете найти много хороших статей в Интернете, чтобы сделать это. :)
- person Rohan Agarwal; 11.07.2020
последний вопрос :), переменная модуля в вашем коде, в какой пакет она входит? может "реагировать"?
- person sparrow2; 11.07.2020
Это из NodeModule. npm install --save-dev @types/webpack-env . Вам это может понадобиться.
- person Rohan Agarwal; 11.07.2020
Я ничего не включал, и это работает, это мой импорт: import React from 'react'; импортировать ReactDOM из 'react-dom'; импортировать './index.css'; импортировать приложение из './App'; импортировать * как serviceWorker из './serviceWorker';
- person sparrow2; 11.07.2020
Давайте продолжим обсуждение в чате.
- person Rohan Agarwal; 11.07.2020
