Pourquoi chaque fois que j'enregistre mon projet Vite React, un nouvel élément de canevas est ajouté au corps de la page au lieu de remplacer l'élément de canevas existant ?

Question

J'essaie de commencer à apprendre ThreeJs (je suis également nouveau dans le développement Web Javascript). Après avoir regardé quelques tutoriels, j'ai commencé avec Vite et React, puis avec un cube rotatif de base. Cette partie fonctionne.

Mais d'après ce que j'ai lu sur vite, enregistrer le fichier sur lequel je travaille devrait suffire à le recharger sur la page. Mais en fait, ce n'est pas le cas. J'ai vérifié le contenu de la page et chaque fois que j'enregistre le fichier, 2 fois le même élément de canevas est ajouté au corps de la page (au lieu de remplacer celui existant), ce qui signifie que je dois faire défiler vers le bas de la page pour voir le nouveau. contenu (ou recharger la page, ce qui va à l'encontre de l'objectif de la fonction d'actualisation rapide de Vite).

Qu'est-ce que j'ai fait de mal ? J'ai construit un projet Vite de base, ajouté un composant à l'application et suivi le didacticiel pour effectuer un rendu de cube de base, en contournant l'actualisation rapide de Vite en cours de route. aide?

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

Réapparition :

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

Chaque fois que vous êtes dans la fonction render 函数中都会调用 renderScene 。在React中，每次重新渲染/更新时都会调用render.

Donc, chaque mise à jour (rechargement à chaud dans votre cas) déclenche la fonction render, créant un nouvel élément DOM.

La création manuelle d'éléments DOM lors de l'utilisation de React est généralement un anti-modèle (sauf si vous êtes absolument sûr de ce que vous faites). Je recommande d'utiliser le moteur de rendu Three.js React comme indiqué ci-dessous : https://github.com/pmndrs/react-two-fiber

Si pour une raison quelconque vous souhaitez vraiment faire cela, vous pourriez envisager de le nettoyer pendant le componentDidMount 生命周期期间调用它，并确保在 componentWillUnmount cycle de vie de votre application React. Vous pouvez en savoir plus à leur sujet ici : https://react.dev/reference/react/Component#Component est monté