React.js: innerHTML versus gevaarlijkSetInnerHTML instellen

Is er een “achter de schermen” verschil met het instellen van de innerHTML van een element versus het instellen van de eigenschap HazardlySetInnerHTML op een element? Stel dat ik de dingen goed reinig voor de eenvoud.

Voorbeeld:

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

vs

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

Ik doe iets ingewikkelders dan het bovenstaande voorbeeld, maar het algemene idee is hetzelfde

Antwoord 1, autoriteit 100%

Ja, er is een verschil!

Het directe effect van het gebruik van innerHTMLversus dangerouslySetInnerHTMLis identiek — het DOM-knooppunt wordt bijgewerkt met de geïnjecteerde HTML.

Echter, wanneer je achter de schermen dangerouslySetInnerHTMLgebruikt, laat het React weten dat de HTML in die component niet iets is waar het om geeft.

Omdat React een virtuele DOM gebruikt, kan het, wanneer het de diff gaat vergelijken met het daadwerkelijke DOM, regelrecht de kinderen van dat knooppunt omzeilen omdat het weet dat de HTML van een andere bron komt. Er is dus prestatiewinst.

Wat nog belangrijker is, als je gewoon innerHTMLgebruikt, kan React niet weten of de DOM-node is gewijzigd. De volgende keer dat de functie renderwordt aangeroepen, zal React de inhoud overschrijvendie handmatig is geïnjecteerd met wat volgens hem de juiste status van dat DOM-knooppunt zou moeten zijn.

Uw oplossing om componentDidUpdatete gebruiken om er altijd voor te zorgen dat de inhoud gesynchroniseerd is, zou volgens mij werken, maar er kan een flits optreden tijdens elke weergave.

Antwoord 2, autoriteit 7%

Je kunt direct aan dom binden

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

Antwoord 3, autoriteit 5%

Volgens Gevaarlijk innerHTML instellen,

Onjuist gebruik van de innerHTMLkan leiden tot een cross- website
scripting (XSS)
aanval. Het opschonen van gebruikersinvoer voor weergave is notoir foutgevoelig,
en het niet goed ontsmetten is een van de belangrijkste oorzaken van internet
kwetsbaarheden op internet.

Onze ontwerpfilosofie is dat het “gemakkelijk” moet zijn om dingen veilig te maken,
en ontwikkelaars moeten hun intentie expliciet vermelden bij het uitvoeren
“onveilige” operaties. De propnaam dangerouslySetInnerHTMLis
opzettelijk gekozen om angstaanjagend te zijn, en de waarde van de prop (een object
in plaats van een tekenreeks) kan worden gebruikt om opgeschoonde gegevens aan te geven.

Na het volledig begrijpen van de beveiligingsgevolgen en correct
de gegevens opschonen, een nieuw object maken dat alleen de sleutel bevat
__htmlen uw opgeschoonde gegevens als de waarde. Hier is een voorbeeld
met behulp van de JSX-syntaxis:

function createMarkup() {
    return {
       __html: 'First · Second'    };
 }; 
<div dangerouslySetInnerHTML={createMarkup()} /> 

Lees er meer over via onderstaande link:

documentatie: Reageer DOM Elements – gevaarlijkSetInnerHTML.

Antwoord 4

Gebaseerd op (dangerouslySetInnerHTML).

Het is een prop die precies doet wat je wilt. Hoe ze het ook noemen om aan te geven dat het voorzichtig moet worden gebruikt

Antwoord 5

Ja, er is een verschil tussen de twee:
dangerouslySetInnerHTML: React diffing-algoritme (https://reactjs.org/docs/reconciliation .html) is ontworpen om de HTML-knooppunten die onder dit kenmerk zijn gewijzigd te negeren, waardoor de prestaties enigszins worden verbeterd.
Als we  innerHTMLgebruiken, kan React niet weten dat de DOM is gewijzigd. De volgende keer dat de render  gebeurt, zal React de inhoud die handmatig is geïnjecteerd overschrijven met wat het denkt dat de juiste status van dat DOM-knooppunt zou moeten zijn.
Dat is waar componentDidUpdatete hulp schiet!