文件更改时页面刷新反应

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 文件进行更改，您将看到更新已应用而无需刷新。

但是，不保持反应状态。有一个叫做 the 的库react-hot-loader，它也可以帮助你维护 react 状态。试试吧！