Question

这可能一直都在问，但我已经尝试过在阳光下的每一种方法都无法找到解决方案。

I've created a repo to make it easier to get help。您可以克隆它，运行npm install然后npm start:dev以查看http://localhost:8080上的快速本地服务器。

它有效，当我更改文件（例如，src/components/Note/Note.css）时，应用程序会重新加载。但是，我只想重新加载组件，而不是整个页面。我不确定我做错了什么。任何帮助将不胜感激！

Answer 1

要调试此类问题，请在Chrome DevTools控制台设置中启用“保留日志”，以便在整个页面刷新期间保留控制台日志。

错误是：

Uncaught RangeError: Maximum call stack size exceeded

一旦做出以下更改，就解决了这个问题：

从插件中删除new webpack.HotModuleReplacementPlugin()（因为webpack-dev-server以--hot启动）
还可以通过将presets中的.babelrc更新为["react", ["env", { "modules": false }]]来选择停用babel转换ES6模块。

"modules": false告诉babel不要编译导入/导出，让webpack按照here和here所述处理它（检查步骤3.3.c）。

Answer 2

对于使用 Next.js 的任何人：

如果您在 pages/ 中编辑文件，整个页面将重新加载。无赖，状态丢失。

如果您在 components/ 中编辑文件，则只会重新加载相关模块（即如您所愿的热重新加载）。

我的建议：保持 pages/ 文件夹中的文件简单。在 components/ 文件夹中的组件文件中迭代您的设计/细节。

例如：

// pages/welcome.jsx
import WelcomePage from "../components/welcomePage";

export default function Welcome() {
  return <WelcomePage />;
}

// components/welcomePage.jsx
import React from "react";
import Layout from "./layout";
import { useContext, useEffect, useState } from "react";
import PlayerContext from "../../context/playerContext";

export default function WelcomePage() {
  const { songTitle } = useContext(PlayerContext);
  return (
    <Layout>
      <div className="...">
        <div className="...">
          Welcome! Let's play {songTitle}.
        </div>
      </div>
    </Layout>
  );
}

然后您可以继续对 components/welcomePage.jsx 进行小的修改，而不会丢失浏览器中的状态。

Webpack /反应热重载重装整页？

2 个答案: