Блог

Главная - Вопросы по программированию - почему я получаю окно с разной шириной значения, используя react js?

почему я получаю окно с разной шириной значения, используя react js?

#javascript #reactjs #resize

Вопрос:

пример: изменение размера с помощью react js

это мой код:

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

const getWidthWindow = () => {
  const [widthWindow, setWidthWindow] = useState(null)
  
  const updateDimensions = () => {
    setWidthWindow(window.screen.width)
  }

  useEffect(() => {
    console.log(widthWindow)

    setWidthWindow(window.screen.width)
    updateDimensions()
    window.addEventListener('resize', updateDimensions)
    return () => window.removeEventListener('resize', updateDimensions)
  }, [widthWindow])
}

export default getWidthWindow;

Я хочу получить значение ширины окна, но результат как будто не соответствует размеру окна, так как это исправить?

Ответ №1:

Ваш код верен, но ведение журнала-нет.

Добавьте крючок для регистрации измерений при их обновлении:

 useEffect(() => {
   console.log(windowDimensions)
}, [windowDimensions])

Рабочий код и коробка.

Комментарии:

1. Я попытался сделать это так и попытался добавить к этому ваше предложение: codesandbox.io/s/broken-darkness-6iyoi? файл=/src/… но все равно не так

2. Ой, я забыл раскошелиться на Песочницу. Я обновил ссылку.

Ответ №2:

Я согласен с приведенным выше ответом о добавлении размеров окон в массив зависимостей useEffect, но мне нравится добавлять немного сахара поверх него..

При изменении размера событие запускается непрерывно и немного влияет на производительность.. Итак, я внедрил регулирование для повышения производительности..

Ответ на ваш обновленный вопрос: Ссылка на Stackblitz

 const GetWidthWindow = () => {
  const [widthWindow, setWidthWindow] = useState(window.innerWidth);

  useEffect(() => {
    let throttleResizeTimer = null;
    function handleResize() {
      clearTimeout(throttleResizeTimer);
      throttleResizeTimer = setTimeout(
        () => setWidthWindow(window.innerWidth),
        500
      );
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [widthWindow]);

  return <p>{JSON.stringify(widthWindow)}</p>;
};

export default GetWidthWindow;

Ответ на твой старый вопрос:

 useEffect(() => {
// implement throttle for little performance gain
let throttleResizeTimer = null;
function handleResize() {
  clearTimeout(throttleResizeTimer);
  throttleResizeTimer = setTimeout(
    () => setWindowDimensions(getWindowDimensions()),
    500
  );
}

window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);  }, [windowDimensions]);
Метки: ,