React internals：Reactはiframeを正しく再レンダリングする方法をどのように知っていますか？

Question

私はReactを試していてiframeを再レンダリングしていましたが、Reactがiframeを正しく再レンダリングする方法、特にテキストエディタを指すものを正しく再レンダリングする方法がわかりませんでした。ここでは、このを示すjsFiddleです：

https://jsfiddle.net/augburto/fkqnm329/2/

は私が指すテキストエディタは重要ではありませんが、私がやっていることは、あなたがトリガー更新]をクリックしたときに、それは常に新しい状態を設定しますsetIntervalを呼び出すとしますです再レンダリングを引き起こします。

textareaを入力したiframeを入力すると、必然的に再レン​​ダリングされ、テキストエディタの位置が失われてしまいますが、どうにか見ても問題なくシームレスに入力できます再レンダリングはconsole.logにあります。注：私はそれがこれを行う必要が示唆されていない - 私はそれがなぜそれをしないのだろうかと思っています。私はReact internals do some smart things like transactionsを知っていますが、カーソルの位置や選択した位置を維持することは期待できません。

Reactがiframeを再レンダリングする方法を具体的にどのように扱いますか？記事を読んだことがあります（つまり、thisとthisですが、私の気持ちはよく分かりません）。それは通常のDOM要素とはまったく異なりますか？

Answer 1

しばらくして、私は答えを発見したと信じていると思います。一般的に、Reactは仮想DOMを作成してシーンの裏側を見渡すので、実際にはiframe要素だけを見ていて、何が生成されているかはわかりません。これはiframeが独自のブラウジングコンテキストを作成する完全に別個のものです。

HTML要素は、現在のページに別のHTMLページを効果的に埋め込む入れ子のブラウズコンテキストを表します。 HTML 4.01では、ドキュメントにはヘッドとボディ、またはヘッドとフレームセットが含まれていても、ボディとフレームセットの両方は含まれていない場合があります。ただし、通常の文書本体で使用できます。各ブラウジングコンテキストには、独自のセッション履歴とアクティブドキュメントがあります。埋め込まれたコンテンツを含む閲覧コンテキストは、親閲覧コンテキストと呼ばれる。トップレベルブラウジングコンテキスト（親を持たない）は、通常はブラウザウィンドウです。

私はReactがiframeを解析する際にいくつかの特別なことを行うと思いますが、全体的にそれほど偏差がありません。

また、Reactが入力要素を一般的に処理する方法についても触れておきます。ReactがFormsの場合は一般的にControlled Componentsを見てください。