Vite React 프로젝트를 저장할 때마다 기존 캔버스 요소를 바꾸는 대신 새 캔버스 요소가 페이지 본문에 추가되는 이유는 무엇입니까?

Question

ThreeJ를 배우려고 합니다(저는 Javascript 웹 개발도 처음입니다). 몇 가지 튜토리얼을 본 후 Vite 및 React로 시작한 다음 기본 회전 큐브로 시작했습니다. 이 부분은 작동합니다.

하지만 vite에 대해 읽은 바에 따르면 작업 중인 파일을 저장하면 페이지에 다시 로드하기에 충분할 것입니다. 그러나 실제로는 그렇지 않습니다. 페이지 콘텐츠를 확인한 후 파일을 저장할 때마다 동일한 캔버스 요소가 페이지 본문에 2배 추가됩니다(기존 요소를 바꾸는 대신). 즉, 새 요소를 보려면 페이지 아래쪽으로 스크롤해야 합니다. 콘텐츠(또는 페이지를 다시 로드하여 Vite의 빠른 새로 고침 기능의 목적을 상실함).

내가 뭘 잘못했나요? 기본 Vite 프로젝트를 구축하고 앱에 구성 요소를 추가한 다음 튜토리얼에 따라 기본 큐브 렌더링을 수행하면서 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- three-fibre

어떤 이유로든 정말로 이 작업을 수행하고 싶다면 React 애플리케이션의 componentDidMount 生命周期期间调用它，并确保在 componentWillUnmount 수명 주기 동안 정리하는 것을 고려할 수 있습니다. 자세한 내용은 여기에서 읽어보세요: https://react.dev/reference/react/Component#Component가 마운트되었습니다