я должен использовать медиа-запросы для адаптивного дизайна с реагировать? - PullRequest
Новая
       41

я должен использовать медиа-запросы для адаптивного дизайна с реагировать?

3 голосов
/ 13 июня 2019

Я хочу сделать адаптивный веб-сайт, использующий реагирование, если я буду использовать медиа-запросы для изменения макета и установить отображение «Нет» для некоторых компонентов в мобильном устройстве (например, обычные html и css), или сделать это, реагируя и не нажимая ». визуализировать этот компонент, а не отображать его с помощью CSS?

например, для меню, если пользователь нажал на кнопку меню, измените свойство отображения меню с 'none' на 'block' 

<ul id="menu">
    <li>one</li>
    <li>one</li>
</ul>

переключение 'open' в списке классов узла DOM

и в css 

.menu li {
    display: none;
}

.menu.open li {
    display: block;
}

или как это, использовать состояние и, если пользователь нажал на кнопку меню, изменить состояние и заставить реагировать на рендеринг меню 

[open,setOpen] = useState(false);

open?<Menu />:'';

Какой подход лучше? какой из них рекомендуется

и еще один вопрос, использование 'refs' для доступа к узлам DOM в реакции лучше, чем использование традиционного document.getElementById ()?

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Моя первоначальная реакция заключается в том, что вы, вероятно, не создаете ничего, что абсолютно требует наиболее производительного решения, поэтому скрытие элемента с помощью CSS вместо исключения его из DOM с помощью React не будет иметь большого значения в долгосрочной перспективе.Я рекомендую сделать все возможное, чтобы завершить проект, а затем беспокоиться о производительности, если этого требует сценарий использования.

Что касается вашего конкретного примера, вероятно, лучше просто переключить существование элемента с помощью React.по сравнению с применением класса для переключения свойства display.Я рассуждаю по этому поводу, потому что обе операции потребуют манипуляции с DOM (React должен будет либо добавить элемент списка, либо обновить значение className).Использование CSS-класса для переключения отображения также будет вторичной задачей применения нового значения display, которое вызывает повторное переформатирование содержимого.

Реагирующее решение: Обновление DOM для вставки новогоnode.
Решение CSS: Обновите DOM, добавив className.Измените содержимое на основе нового свойства отображения.

По поводу вашего второго вопроса о $ refs ...

Использование $ refs будет лучше, чем document.getElementById.Объект $ refs поддерживает в памяти ссылку на узлы HTML, которыми необходимо манипулировать.document.getElementById будет требовать обхода дерева DOM, чтобы найти элемент, где при использовании $ refs просто ищет узел через именованное свойство.

1 голос
/ 13 июня 2019

Если это возможно сделать в CSS, всегда используйте CSS.JS дороже CSS с точки зрения загрузки и рендеринга.По вашему требованию вам нужно изменить макет в зависимости от загруженного устройства.Так что используйте медиа-запросы и CSS-гриды, чтобы сделать это без использования JS.Refs - это реактивный способ получить элемент DOM.Поэтому, пожалуйста, используйте это вместо использования таких методов, как document.getElementById ().

...