Должен ли я использовать Twitter начальной загрузки или JavaScript, чтобы скрыть div?

Question

Я использую responseJS, и я хотел бы скрыть div на меньшем экране (ширина<768px). У меня есть два варианта здесь:

Первый метод:

{
 !!isSmallerScreen ? 
 <div className="icon">Icon</div>
 : <div className="name">Name</div>
}

Описание: isSmallScreen является логической переменной Этот способ даже не будет показывать другой div в исходном коде.

Второй метод:

   <div className="icon hidden-md-up">Icon</div>
   <div className="name hidden-sm-down">Name</div>

Описание: здесь я использую twiitter bootstrap, который добавит display: none на другом див.

PS Я знаю, что bootstrap также использует javascript, но мой вопрос: какой подход лучше использовать? Infact я запутался, стоит ли использовать bootstrap или нет, как я уже использую css3 flexbox system с postcss а также cssnext,

Ваши предложения будут высоко оценены. Спасибо за ваше время заранее.

Answer 1

Во втором методе, хотя будет скрывать div, но все еще остаются в DOM.

Вы должны использовать метод ReactJS и не делать рендеринг. Причина в том, что если вам не нужно, не создавайте его без необходимости и делайте DOM тяжелым.

Надеюсь это поможет.

Answer 2

Как отметил Даттебайо, добавление ненужных элементов в DOM является плохой практикой. Принимая решение о том, как что-то должно быть скрыто, задайте себе пару вопросов;

Будет ли этот элемент чередовать состояние? Не this.state, но является ли это скрытым или нет.

Если нет, то условный рендеринг является очевидным выбором.

render() {    
   return (
       this.props.isSmallScreen ?
           <SmallScreenElement /> :
           <BigScreenElement />;
   );
}

Если да, будет ли он чередоваться часто?

Если да, то CSS, скорее всего, выбор для этого конкретного элемента.

В противном случае придерживайтесь условного рендеринга.

Надеюсь, это поможет!

Answer 3

Вопрос предпочтения (и минимальная проблема производительности, вероятно, не стоит останавливать принятие решения).

Лично я пошел бы со вторым методом по простым причинам, которые:

1. Проще добавить переходы (постепенное увеличение / уменьшение)
2. Немного чище
3. Ваше vdom останется прежним - если третья сторона или вы сами позже решите манипулировать домом снаружи, вы знаете, что это будет согласованно. (т. е. выбор n-го ребенка и т. д.). без сюрпризов.

Но, в конечном счете, зависит от вас:)