[解決済み】React.js：Set innerHTMLとdangerouslySetInnerHTMLを比較する。

質問

要素のinnerHTMLを設定することと、要素に危険なSetInnerHTMLプロパティを設定することの間に、何かquot;behind"違いがあるのでしょうか？単純化するために、私が適切にサニタイズしていると仮定してください。

例

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

対

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

上の例よりもう少し複雑なことをしていますが、全体的な考え方は同じです。

どのように解決するのか？

そうなんです、違いがあるんです

を使用した場合の即効性は innerHTML 対 dangerouslySetInnerHTML は同じです -- DOM ノードが注入された HTML で更新されます。

しかし を使用する場合、その裏側では dangerouslySetInnerHTML は、Reactにそのコンポーネント内のHTMLが気にならないものであることを知らせます。

React は仮想 DOM を使用しているため、実際の DOM に対して diff を比較しようとすると、そのノードの子ノードのチェックをバイパスすることができます。 なぜなら、そのHTMLが別のソースから来たものであることがわかるからです。 . だから、パフォーマンスが向上するんです。

さらに重要なことは を使用する場合、単純に innerHTML Reactは、DOMノードが変更されたことを知る術を持ちません。次に render 関数が呼び出されます。 React はコンテンツを上書きします。 を手動で注入し、その DOM ノードが正しい状態であるべきだと考えています。

を使用するソリューションです。 componentDidUpdate を使用して、常にコンテンツが同期していることを確認することは可能だと思います。