REACT.js : Set innerHTML vs dangerouslySetInnerHTML

Question

Y a-t-il une différence de « behind the scenes » de réglage vs d’innerHTML de l’élément définissant la propriété dangerouslySetInnerHTML sur un élément ? Supposons que je suis désinfection correctement les choses par souci de simplicité.

Exemple :

vs

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

Answer 1

Oui il y a une différence!

L'effet immédiat de l'utilisation de innerHTML contre dangerouslySetInnerHTML est identique -- le nœud DOM sera mise à jour avec l'injection de HTML.

Cependant, en arrière-plan lorsque vous utilisez dangerouslySetInnerHTML il vous permet de Réagir savoir que le code HTML à l'intérieur de ce composant n'est pas quelque chose dont il se soucie.

Parce que Réagir utilise un virtuel DOM, quand il s'agit de comparer les diff contre le DOM, il peut directement en haut de contourner le contrôle des enfants de ce nœud , car il sait que le HTML est à venir à partir d'une autre source. Donc, il y a des gains de performances.

Plus important encore, si vous utilisez simplement innerHTML, de Réagir a aucun moyen de connaître le nœud DOM a été modifié. La prochaine fois que l' render fonction est appelée, Réagir écrasera le contenu qui a été injecté manuellement avec ce qu'il croit être le bon état de ce nœud DOM devrait être.

Votre solution pour utiliser componentDidUpdate de toujours s'assurer que le contenu est synchronisé je pense pourrait fonctionner, mais il pourrait y avoir un flash au cours de chaque rendu.

Answer 2

Basé sur https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

C’est un accessoire qui fait exactement ce que vous voulez. Cependant ils nomment de transmettre que ce soit à utiliser avec prudence

Answer 3

Une des raisons pour utiliser innerHTML sur dangerouslySetInnerHtml sont d’éviter les attaques Cross-site scripting. Comme le contenu est ignoré lorsque vous utilisez innerHTML tandis que réagir n’échappe pas le contenu sur l’utilisation de dangerouslySetInnerHtml