Всем привет! Возник теоретический вопрос по работе с react-ом.
У меня есть задача при определенном размере экрана не рендерить определенный элемент и не показывать его на экране. Какой из этих способов не будет рендерить содержимое и какой из них более быстродействующий?
Допустим я открываю страницу с мобильного устройства шириной 600 пикселей. Как менее затратно будет с точки зрения react поступить -
Указать для класса в css
@media screen and (max-width: 767px) {
.buttonContainer {
display: none;
}
}
Или сделать проверку на сам элемент отталкиваясь от размера экрана, который будет передаваться пропсом в компонент
const Test = ({ windowSize }) => (
<section>
{windowSize > 767 && (
<div className="buttonContainer">
<button>Just Button</button>
</div>
)}
</section>
);