web-dev-qa-db-ja.com

React.js：innerHTMLとdangerouslySetInnerHTMLの設定

要素のinnerHTMLを設定することと要素にdangerouslySetInnerHTMLプロパティを設定することとの間に「舞台裏」の違いはありますか？単純化のために物事を適切にサニタイズしているとします。

例：

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>
    );
  }
});

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

javascripthtmlreactjs
118
Jshoe523

はい、違いがあります。

innerHTMLとdangerouslySetInnerHTMLを使用した場合の直接的な効果は同じです。DOMノードは挿入されたHTMLで更新されます。

しかし、dangerouslySetInnerHTMLを使うときの裏側では、そのコンポーネントの中のHTMLはそれが気にするものではないことをReactに知らせます。

Reactは仮想DOMを使用しているので、diffを実際のDOMと比較するとき、HTMLが他のソースから来ていることを知っているので、そのノードの子をチェックすることをまっすぐ回避できますそのため、パフォーマンスが向上します。

もっと重要なことに、単にinnerHTMLを使うのであれば、ReactはDOMノードが変更されたことを知る方法がありません。次にrender関数が呼び出されたときに、Reactは手動で挿入されたコンテンツを、そのDOMノードの正しい状態であるべきと考えるもので上書きします。

コンテンツが常に同期していることを確認するためにcomponentDidUpdateを使用するためのあなたの解決策は、私はうまくいくと信じていますが、各レンダリングの間にフラッシュがあるかもしれません。

164
Francis John

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml に基づく

それはまさにあなたが望むことをする小道具です。しかし、彼らはそれが慎重に使用されるべきであることを伝えるためにそれを命名します

0
Jason