Warum wird jedes Mal, wenn ich mein Vite React-Projekt speichere, ein neues Canvas-Element zum Seitenkörper hinzugefügt, anstatt das vorhandene Canvas-Element zu ersetzen?

Question

Ich versuche, ThreeJs zu lernen (ich bin auch neu in der Javascript-Webentwicklung). Nachdem ich mir einige Tutorials angesehen hatte, begann ich mit Vite und React und dann mit einem einfachen rotierenden Würfel. Dieser Teil funktioniert.

Aber nach dem, was ich über vite gelesen habe, sollte das Speichern der Datei, an der ich arbeite, ausreichen, um sie erneut auf die Seite zu laden. Aber tatsächlich ist es das nicht. Ich habe den Seiteninhalt überprüft und jedes Mal, wenn ich die Datei speichere, wird zweimal dasselbe Canvas-Element an den Seitenkörper angehängt (anstatt das vorhandene zu ersetzen), was bedeutet, dass ich zum Ende der Seite scrollen muss, um das neue zu sehen Inhalt (oder Neuladen der Seite, was den Zweck der Schnellaktualisierungsfunktion von Vite zunichte macht).

Was habe ich falsch gemacht? Ich habe ein einfaches Vite-Projekt erstellt, der App eine Komponente hinzugefügt und bin dem Tutorial gefolgt, um ein einfaches Cube-Rendering durchzuführen, wobei ich dabei die schnelle Aktualisierung von Vite umgangen habe. helfen?

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

Wiederauftauchen:

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#组件已挂载