首頁猿問 React useState...

React useState 表現(xiàn)非常糟糕

JavaScript

互換的青春 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> ) }當(dāng)我調(diào)整頁面大小時(shí)，頁面會(huì)嚴(yán)重滯后，甚至導(dǎo)致瀏覽器出現(xiàn)錯(cuò)誤。代碼似乎有問題，但我無法找出。提前致謝！

查看完整描述

1 回答

楊魅力

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

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

.....

useEffect(() => {

window.addEventListener("resize", handlePopupSize)

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

},[])

您當(dāng)前的代碼創(chuàng)建了一個(gè)循環(huán)addEventListeners，因?yàn)樵诿總€(gè)渲染上都會(huì)創(chuàng)建一個(gè)偵聽器，并且設(shè)置狀態(tài)會(huì)在每次調(diào)整大小時(shí)導(dǎo)致新的渲染。

反對(duì) 回復(fù) 2023-09-14