为什么每次保存我的vite react项目时，会向页面主体添加新的canvas元素，而不是替换现有的canvas元素？

Question

我正在尝试开始学习 ThreeJs（我也是 Javascript Web 开发的新手）。看了一些教程后，我从vite和react开始，然后从基本的旋转立方体开始。该部分有效。

但是根据我所读到的有关 vite 的内容，保存我正在处理的文件应该足以将其重新加载到页面上。事实并非如此。我检查了页面内容，每次保存文件时，都会将 2x 相同的画布元素附加到页面正文（而不是替换现有的），这意味着我必须向下滚动到页面底部才能看到新内容（或者重新加载页面，这违背了Vite快速刷新功能的目的）。

我做错了什么？我搭建了一个基本的vite项目，在App中添加了一个组件，然后按照教程做了一个基本的立方体渲染，一路上我就绕过了Vite的快速刷新。帮忙？

Github： https://github.com/amdreallyfast/ThreeJsTutorials/tree/main/npmfrontend

重现：

clone
cd <directory>/npmfrontend
npm install 
npm run dev
Open page in browser
Inspect page -> Elements
Open SceneRenderer.jsx
Make change and save (ex: rotation speed; repeat multiple times)
Notice how the body element on the loaded page keeps appending new canvases

Answer 1

您每次在 render 函数中都会调用 renderScene 。在React中，每次重新渲染/更新时都会调用render函数。

因此，每次更新（在您的情况下为热重载）都会触发 render 函数，从而创建一个新的 DOM 元素。

使用 React 时手动创建 DOM 元素通常是一种反模式（除非您完全确定自己在做什么）。我建议使用 Three.js React 渲染器，如下所示： https://github.com/ pmndrs/react-三纤维

如果出于某种原因你确实想这样做，你可以考虑在 React 应用程序的 componentDidMount 生命周期期间调用它，并确保在 componentWillUnmount 生命周期期间清理它。您可以在这里阅读有关它们的更多信息： https://react.dev/reference/react/Component#组件已挂载