Mengapa setiap kali saya menyimpan projek Vite React saya, elemen kanvas baharu ditambahkan pada isi halaman dan bukannya menggantikan elemen kanvas sedia ada?

Question

Saya cuba mula belajar ThreeJs (saya juga baru dalam pembangunan web Javascript). Selepas menonton beberapa tutorial, saya mulakan dengan Vite dan React, kemudian bermula dengan kiub berputar asas. Bahagian ini berfungsi.

Tetapi daripada apa yang saya baca tentang vite, menyimpan fail yang sedang saya usahakan sudah memadai untuk memuatkannya semula ke halaman. Tetapi sebenarnya, ia tidak. Saya menyemak kandungan halaman dan setiap kali saya menyimpan fail, 2x elemen kanvas yang sama dilampirkan pada badan halaman (bukan menggantikan yang sedia ada), yang bermaksud saya perlu menatal ke bahagian bawah halaman untuk melihat yang baharu kandungan (atau memuat semula halaman, yang mengalahkan tujuan ciri muat semula pantas Vite).

Apa salah saya? Saya membina projek asas Vite, menambahkan komponen pada apl dan mengikuti tutorial untuk melakukan pemaparan kiub asas, memintas penyegaran pantas Vite di sepanjang jalan. tolong?

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

Kemunculan semula:

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

Setiap kali anda berada dalam fungsi render 函数中都会调用 renderScene 。在React中，每次重新渲染/更新时都会调用render.

Jadi setiap kemas kini (muat semula panas dalam kes anda) mencetuskan fungsi render, mencipta elemen DOM baharu.

Mencipta elemen DOM secara manual apabila menggunakan React secara amnya adalah anti-corak (melainkan anda benar-benar pasti apa yang anda lakukan). Saya mengesyorkan menggunakan pemapar Three.js React seperti yang ditunjukkan di bawah: https://github.com/pmndrs/react-three-fiber

Jika atas sebab tertentu anda benar-benar ingin melakukan ini, anda boleh mempertimbangkan untuk membersihkannya semasa componentDidMount 生命周期期间调用它，并确保在 componentWillUnmount kitaran hayat aplikasi React anda. Anda boleh membaca lebih lanjut tentang mereka di sini: https://react.dev/reference/react/Component#Component is mounted