亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React useState 表現非常糟糕

React useState 表現非常糟糕

互換的青春 2023-09-14 20:46:04
我無法理解這段代碼中的問題:    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>        )    }當我調整頁面大小時,頁面會嚴重滯后,甚至導致瀏覽器出現錯誤。代碼似乎有問題,但我無法找出。提前致謝!
查看完整描述

1 回答

?
楊魅力

TA貢獻1811條經驗 獲得超6個贊

您需要在useEffect掛鉤中添加事件偵聽器。


import React, { useState, useEffect } from 'react'

.....

.....

useEffect(() => {


    window.addEventListener("resize", handlePopupSize)

    return () => window.removeEventListener("resize", handlePopupSize)

},[])

您當前的代碼創建了一個循環addEventListeners,因為在每個渲染上都會創建一個偵聽器,并且設置狀態會在每次調整大小時導致新的渲染。


查看完整回答
反對 回復 2023-09-14
  • 1 回答
  • 0 關注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號