Реагировать на условный размер окна рендеринга продолжать обновлять значение - PullRequest
Новая
       2

Реагировать на условный размер окна рендеринга продолжать обновлять значение

0 голосов
/ 25 мая 2020

Я использую код из Реагировать на условный рендеринг на основе размера области просмотра , но я не понимаю одного: я добавил консольный журнал внутри useEffect, и когда я добавляю скобки [] в финале как вы можете видеть ниже. Это заставляет useeffect запускаться только один раз и кажется, что он работает, потому что журнал консоли отображается только один раз, когда я обновляю sh страницу. Но когда я использую React Developer Tools в браузере, состояние windowsSize продолжает обновлять значение в соответствии с тем, что я обновляю размер окна. 

const Navbar = () => {
const [windowSize, setwindowSize] = useState(window.innerWidth);
const updateWindowsSize = () => {
    setwindowSize(window.innerWidth)
}
useEffect(() => {
    console.log(windowSize)
    window.addEventListener("resize", updateWindowsSize);

    return () => window.removeEventListener("resize", updateWindowsSize);
  },[]);

return (
<Fragment>
    {windowSize>1000 ? (<NavDesk/>) : (<NavSmartPhone/>)} 
</Fragment>
);}

1 Ответ

0 голосов
/ 25 мая 2020

Единственная цель useEffect состоит в том, что он добавляет слушателя, когда компонент монтирует, и удаляет его, когда компонент размонтируется

Состояние постоянно обновляется, потому что вы добавили EventListener в DOM, который будет постоянно слушать событие, которое здесь "изменение размера", и пока событие запускается, оно будет обновлять функцию обратного вызова,

...