Question

我有一个react / redux应用程序，当文件更改并点击保存时，它将刷新页面并清除所有的Redux数据。我知道我可以将Redux数据持久保存到本地存储中。我很想知道这是文件更改时react / node服务器刷新页面的默认行为吗？如果不能，该如何预防？

Answer 1

这是默认行为吗？：是的。

这被称为live-reloading，其中文件中的更改将刷新本地服务器并重新启动应用，将所有状态设置为初始状态。

但是您提到的问题是应用程序的状态丢失了。

还有一个称为hot-reloading的概念可以阻止它。热重装将仅替换应用程序运行时已更改的模块。这不会导致应用程序完全刷新。它将仅使用更改更新页面，而无需重新加载，因此将保持应用程序的状态。但是，该组件的状态（即，反应状态）无法保持。

现在，当您使用CRA创建React项目时，内置了热重载功能。您可以通过运行应用程序并更改某些CSS来尝试使用它。您会注意到该应用程序没有刷新，但是更改已应用！

但是，如果尝试在JSX文件中执行此操作，则整个应用程序都会更改。这是因为需要进行一些更改才能在JSX文件中启用热重载。

转到index.js并编写以下代码行：

if (module.hot && process.env.NODE_ENV !== 'production') {
  module.hot.accept();
}

如果您现在就对JSX文件进行更改，您将看到应用更新而无需刷新。

但是，反应状态未保持。有一个名为react-hot-loader的库，它也可以帮助您保持反应状态。尝试一下！