Vite React プロジェクトを保存するたびに、既存のキャンバス要素を置き換えるのではなく、新しいキャンバス要素がページ本文に追加されるのはなぜですか?

Question

ThreeJs の学習を始めようとしています (JavaScript Web 開発も初心者です)。いくつかのチュートリアルを見た後、Vite と React から始め、次に基本的な回転立方体から始めました。この部分は機能します。

しかし、vite について読んだところによると、作業中のファイルを保存するだけでページに再ロードできるはずです。しかし実際にはそうではありません。ページのコンテンツを確認したところ、ファイルを保存するたびに、(既存のキャンバス要素を置き換えるのではなく) 2 つの同じキャンバス要素がページ本文に追加されます。つまり、新しいキャンバス要素を確認するには、ページの一番下までスクロールする必要があります。コンテンツ（または、Vite の高速更新機能の目的に反するページのリロード）。

私は何を間違えたのでしょうか?基本的な Vite プロジェクトを構築し、アプリにコンポーネントを追加し、途中で Vite の高速更新をバイパスして、基本的な立方体レンダリングを行うチュートリアルに従いました。ヘルプ？

ギットハブ： https://github.com/amdreallyfast/ThreeJsTutorials/tree/main/npmfrontend

＃＃＃再現：＃＃＃ ああああ

Answer 1

#render 関数では毎回 renderScene を呼び出します。 React では、再レンダリング/更新されるたびに render 関数が呼び出されます。

したがって、更新 (あなたの場合はホットリロード) ごとに

render 関数がトリガーされ、新しい DOM 要素が作成されます。

React を使用するときに DOM 要素を手動で作成することは、一般にアンチパターンです (何をしようとしているのか完全に確信している場合を除く)。次のように Three.js React レンダラーを使用することをお勧めします:

https://github.com/pmndrs/react-三fiber

何らかの理由でこれを本当に実行したい場合は、React アプリケーションの

componentDidMount ライフサイクル中に呼び出して、componentWillUnmount ライフサイクル中に必ずクリーンアップすることを検討してください。 。詳細については、ここで読むことができます: https://react.dev/reference/react/Component#コンポーネントがマウントされています