我的组件在我的 jsx 文件中不断重新渲染

Question

在我的代码中，我有一个使用 React 中的

useEffect

钩子的组件。该组件中有一个三个场景。当我尝试从组件外部向场景添加任何

gltf

模型时，它会重新渲染整个场景。 editor.jsx 有一个控制器。以下是一些代码片段：

export default function Editor(){
    const { companies,products,auth,user } = usePage().props;

    const [Fname, setFname] = useState("");
    const [addedfurnitures, setaddedfurnitures] = useState([]);
    const [panel, setPanel] = useState(false);
    const [add, setAdd] = useState(false);
    const scene = new THREE.Scene();

/* here i have a useEffect hook with the scene and the initializations of all the 3d components for the scene but not the gltf models i have them inside another useEffect bellow with an empty dependencies and does not use any of the global variables */

 useEffect(() => {
        if (add){
        const loader = new GLTFLoader();
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('/examples/jsm/libs/draco/');
        loader.setDRACOLoader(dracoLoader);

            let path = '/build/assets/models/' + Fname + '.gltf';
            loader.load(
                path,
                function (gltf) {
                    const gltfModel = gltf.scene.clone();
                    console.log('adding...')
                        scene.add(gltfModel);
                    gltfModel.position.set(0,1,0);
                }
                );
            }
        },[add]);

/*here is the rest of the code with functions outside all of the useEffects and a return that has my divs and buttons and everything */

<div id="inspectitems" className="inspectitem">
            <button className="close-btn" onClick={closepannel}><IoMdClose style={{ width: "30px" , height :"25.5px" }} /></button>
            <div className="inspect-container">
            {products.map(product => {
    if (product.model_name === Fname) {
        return (
            <>
                <div className="InspectViews">
                    <InspectView name={product.model_name} tag={product.tag} />
                    <div className="rotate"></div>
                </div>
                <div className="description">
                    <h6><b>name : </b></h6><h6> {product.name}</h6>
                    <h6><b>description : </b></h6><h6>  {product.description}</h6>
                    <h6><b>price : </b></h6><h6>  {product.price}DT</h6>
                    <h6><b>colors :</b></h6>
                    <h6 className="colors"> {product.colors.map((color)=>(
                        <div style={{background:color,width:"30px",height:'30px',border:'1px solid black',marginRight:"15px"}}></div>
                    ))} </h6>
                            <div className="buttons">
            <button id="visit">View Product Page</button>
            <button id="add" onClick={handleAddToScene}>Add to scene</button>
        </div>
                </div>
            </>
        );
    }
})}
 /* this is the part that lets me chose a gltf model and add it */

我将提供一些图像以更好地理解问题：
这是我将模型添加到 3d 组件的部分。 这是显示界面的部分，其中屏幕的蓝色部分是 3d 组件： 如果有人想要完整的代码，我可以通过不和谐发送它

我尝试使用

useMemo

，但没有成功。即使我按下过滤器按钮，组件也会重新渲染。

Answer 1

我还不到 100 岁，无法测试它，但这可能是由于场景的定义方式所致；它在组件函数体内调用一个新的 THREE.Scene() ，该函数在每次渲染时执行，每次都会发出一个新实例。

可能值得尝试创建一个持久场景，该场景不会在每次渲染时使用引用重新创建。

const sceneRef = useRef(new THREE.Scene());
const scene = sceneRef.current;

现在，场景在组件的所有渲染中将是相同的实例。