React useState 表现非常糟糕

Question

我无法理解这段代码中的问题：

    export default function CustomPopup({wi,he,children}) {

        //some code

        const [popupSize,setPopupSize] = useState([`${wi}px`,`${he}px`])

        

        const handlePopupSize = () =>{

            let c = [];

            (window.innerWidth < (wi/0.9)) ? c[0] = `90%` : c[0] = `${wi}px`;

            (window.innerHeight < (he/0.8)) ? c[1] = `80%` : c[1] = `${he}px`;

            if (c != popupSize) { setPopupSize(c) };

        }

        window.addEventListener("resize", handlePopupSize)

        return (

            

                <div className="popup--page--wrapper">

                    <div className="popup--box" style={{width: popupSize[0], height: popupSize[1]}}>  

                        { children }

                    </div>

                </div>

        )

    }

当我调整页面大小时，页面会严重滞后，甚至导致浏览器出现错误。代码似乎有问题，但我无法找出。提前致谢！

Answer 1

您需要在useEffect挂钩中添加事件侦听器。import React, { useState, useEffect } from 'react'..........useEffect(() => {&nbsp; &nbsp; window.addEventListener("resize", handlePopupSize)&nbsp; &nbsp; return () => window.removeEventListener("resize", handlePopupSize)},[])您当前的代码创建了一个循环addEventListeners，因为在每个渲染上都会创建一个侦听器，并且设置状态会在每次调整大小时导致新的渲染。