React.js：innerHTMLとdangerouslySetInnerHTMLを設定します

Question

要素のinnerHTMLを設定してから要素のdangerouslySetInnerHTMLプロパティを設定することとの「舞台裏」の違いはありますか？簡単にするために、私が適切に衛生的に処理しているとします。

例：

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

私は上記の例よりも少し複雑な何かをやっているが、全体的なアイデアは、に基づいて、同じ

Answer 1

はい違いがあります！

innerHTMLとdangerouslySetInnerHTMLを使用するとすぐに、DOMノードが挿入されたHTMLで更新されます。

の場合、dangerouslySetInnerHTMLを使用すると、そのコンポーネントの内部のHTMLが気にするものではないことがわかります。

があるのでリアクトそれが実際のDOMに対して差分を比較するために行くとき、それはHTMLが別のソースから来ている知っているので、それはまっすぐにバイパスがそのノードの子どもをチェックすることができ、仮想DOMを使用しています。だからパフォーマンスが向上します。

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

componentDidUpdateを使用するソリューションでは、常にコンテンツが同期していると確信していますが、各レンダリングでは動作すると思われます。

Answer 2

ですhttps://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

それはあなたが望むものを正確に行う小道具です。しかし、彼らはそれが慎重に使用する必要があることを伝えるために名前を付けます