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 ?
P粉186904731
P粉186904731 2024-03-30 09:57:49
0
1
382

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 /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

P粉186904731
P粉186904731

répondre à tous (1)
P粉788571316

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

Donc, chaque mise à jour (rechargement à chaud dans votre cas) déclenche la fonctionrender, 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 lecomponentDidMount生命周期期间调用它,并确保在componentWillUnmountcycle de vie de votre application React. Vous pouvez en savoir plus à leur sujet ici :https://react.dev/reference/react/Component#Component est monté

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!