这可能是老生常谈,但我已经尝试了各种方法,却找不到解决方案。
我创建了一个仓库,以便更轻松地获取帮助。您可以克隆它,运行npm install
,然后npm start:dev
,在http://localhost:8080上查看快速的本地服务器。
它能工作,当我更改一个文件(比如,src/components/Note/Note.css
)时,应用程序会重新加载。然而,我想只重新加载组件,而不是整个页面。我不确定我做错了什么。非常感谢您的帮助!
这可能是老生常谈,但我已经尝试了各种方法,却找不到解决方案。
我创建了一个仓库,以便更轻松地获取帮助。您可以克隆它,运行npm install
,然后npm start:dev
,在http://localhost:8080上查看快速的本地服务器。
它能工作,当我更改一个文件(比如,src/components/Note/Note.css
)时,应用程序会重新加载。然而,我想只重新加载组件,而不是整个页面。我不确定我做错了什么。非常感谢您的帮助!
要调试这样的问题,请在Chrome DevTools控制台设置中启用“保留日志”,以在页面刷新时保留控制台日志。
错误信息是:
Uncaught RangeError: Maximum call stack size exceeded
进行以下更改后问题得以解决:
从插件中删除new webpack.HotModuleReplacementPlugin()
(因为webpack-dev-server已经使用--hot
启动)
还可以通过更新.babelrc
中的presets
为["react", ["env", { "modules": false }]]
来退出将ES6模块转译为Babel。
"modules": false
是告诉Babel不要编译导入/导出,而让Webpack按照这里和这里所述处理它们(请查看第3.3.c步骤)。
对于使用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
进行小的编辑,而不会丢失浏览器中的状态。