reactjs - 文件更改时页面刷新 react

Question

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

Answer 1

这是默认行为吗？ : 是的，是的。

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

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

还有一个名为 hot-reloading 的概念阻止了它。热重载只会替换在应用程序运行时更改的模块。这不会导致应用程序完全刷新。它只会用更改更新页面而无需重新加载，因此将保持应用程序的状态。但是，不会维护组件的状态，即 react 状态。

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

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

转到 index.js 并编写这行代码:

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

如果您现在去更改您的 JSX 文件，您将看到应用了更新而无需刷新。

但是，不会维持 react 状态。有一个名为 react-hot-loader 的库，它也可以帮助您维护 React 状态。试试吧!