web-dev-qa-db-fra.com

React.js: Définit innerHTML vs dangerouslySetInnerHTML

Existe-t-il une différence "en coulisse" par rapport à la définition de innerHTML par un élément par rapport à la définition de la propriété dangerouslySetInnerHTML sur un élément? Supposons que je désinfecte correctement les choses pour des raisons de simplicité.

Exemple:

var test = React.createClass({
  render: function(){
    return (
      <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
    );
  }
});

contre

var test = React.createClass({
  componentDidUpdate: function(prevProp, prevState){
    this.refs.test.innerHTML = "Hello";
  },
  render: function(){
    return (
      <div contentEditable='true' ref='test'></div>
    );
  }
});

Je fais quelque chose d'un peu plus compliqué que l'exemple ci-dessus, mais l'idée générale est la même

javascripthtmlreactjs
124
Jshoe523

Oui, il y a une différence!

L'effet immédiat de l'utilisation de innerHTML par rapport à dangerouslySetInnerHTML est identique: le nœud DOM sera mis à jour avec le code HTML injecté.

Cependant , lorsque vous utilisez dangerouslySetInnerHTML, _ permet à React de savoir que le code HTML à l'intérieur de ce composant n'est pas quelque chose dont il se soucie.

Parce que React utilise un DOM virtuel, quand il compare le diff avec le DOM actuel, il peut directement contourner en vérifiant les enfants de ce noeud car il connaît le code HTML. provient d'une autre source . Donc, il y a des gains de performance.

Plus important encore, si vous utilisez simplement innerHTML, React n'a aucun moyen de savoir que le nœud DOM a été modifié. La prochaine fois que la fonction render sera appelée, React écrasera le conten qui a été injecté manuellement avec ce qui, à son avis, devrait être l'état correct de ce nœud DOM.

Votre solution d'utiliser componentDidUpdate pour toujours vous assurer que le contenu est synchronisé fonctionnerait, mais il pourrait y avoir un flash lors de chaque rendu.

171
Francis John

Basé sur ( dangereusementSetInnerHTML ).

C'est un accessoire qui fait exactement ce que vous voulez. Cependant, ils le nomment pour indiquer qu'il doit être utilisé avec prudence

0
Jason