要素の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>
);
}
});
上記の例よりも少し複雑なことをしていますが、全体的な考え方は同じです。
はい、違いがあります。
innerHTML
とdangerouslySetInnerHTML
を使用した場合の直接的な効果は同じです。DOMノードは挿入されたHTMLで更新されます。
しかし、dangerouslySetInnerHTML
を使うときの裏側では、そのコンポーネントの中のHTMLはそれが気にするものではないことをReactに知らせます。
Reactは仮想DOMを使用しているので、diffを実際のDOMと比較するとき、HTMLが他のソースから来ていることを知っているので、そのノードの子をチェックすることをまっすぐ回避できますそのため、パフォーマンスが向上します。
もっと重要なことに、単にinnerHTML
を使うのであれば、ReactはDOMノードが変更されたことを知る方法がありません。次にrender
関数が呼び出されたときに、Reactは手動で挿入されたコンテンツを、そのDOMノードの正しい状態であるべきと考えるもので上書きします。
コンテンツが常に同期していることを確認するためにcomponentDidUpdate
を使用するためのあなたの解決策は、私はうまくいくと信じていますが、各レンダリングの間にフラッシュがあるかもしれません。
https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml に基づく
それはまさにあなたが望むことをする小道具です。しかし、彼らはそれが慎重に使用されるべきであることを伝えるためにそれを命名します