Dois-je utiliser twitter bootstrap ou javascript pour masquer un div?

Question

J'utilise reactJS et je voudrais cacher un div sur un petit écran (largeur < 768px). J'ai deux options:

Première méthode:

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

Description: isSmallScreen est une variable booléenne. Cette façon ne montrera même pas autre div dans le code source.

Deuxième méthode:

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

Description: J'utilise twiitter bootstrap ici qui ajoutera display: none sur autre div.

P.s. Je sais que bootstrap utilise aussi javascript mais ma question est quelle approche est préférable d'utiliser? En fait, je suis confus d'utiliser ou non bootstrap car j'utilise déjà css3 flexbox system avec postcss et cssnext.

Vos suggestions seront grandement appréciées. Merci pour votre temps à l'avance.

Answer 1

Dans la seconde méthode, bien que cache la div mais reste dans le DOM.

Vous devez utiliser la méthode ReactJS et ne pas rendre la div est possible. La raison étant si vous n'avez pas besoin de le créer inutilement et rendre le DOM lourd.

Espérons que cela aide.

Answer 2

La question de préférence (et le problème de performance minimal ne vaut probablement pas la peine de retarder la prise de décision).

Personnellement, j'aller avec la deuxième méthode pour les raisons simples:

1. plus facile d'ajouter des transitions (fade in/out)
2. Un peu plus propre
3. Votre vdom restera le même - si une tierce partie, ou vous-même, décidez de manipuler le dom extérieur réagissez, vous savez il sera cohérent. (c'est-à-dire sélectionner nth-child, etc.) pas de surprises.

Mais, en fin de compte à vous :)

Answer 3

Comme dattebayo a souligné, il est une mauvaise pratique d'ajouter des éléments inutiles au DOM. Lorsque vous prenez une décision sur la façon dont quelque chose devrait être caché, posez-vous quelques questions;

Cet élément alterne état? Pas cet état mais si oui ou non il est caché.

Si ce n'est pas le cas, le rendu conditionnel est le choix le plus clair.

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

Si oui, l'état alterne-t-il fréquemment?

Si oui, CSS est probablement le choix pour cet élément particulier.

Sinon, respectez le rendu conditionnel.

J'espère que cela aide!