為什麼每次儲存我的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#元件已掛載

#