React 内部结构：React 如何知道如何正确地重新渲染 iframe？

Question

我正在试验 React 并重新渲染 iframe，但我不确定 React 如何正确重新渲染 iframe，尤其是指向文本编辑器的 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 并在幕后进行了 diff，所以它实际上只查看 iframe 元素而不是生成的内容。这是一个完全独立的事情，iframe 创建自己的浏览上下文。阅读MDN documentation on iframe 真的很丰富：

HTML 元素代表一个嵌套的浏览上下文，有效地将另一个 HTML 页面嵌入到当前页面中。在 HTML 4.01 中，文档可能包含头部和正文或头部和框架集，但不能同时包含正文和框架集。但是，可以在普通文档正文中使用 an。每个浏览上下文都有自己的会话历史和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

我认为 React 在解析 iframe 时确实做了一些特殊的事情，但总的来说它并没有太大的偏差。

另外，我认为 React 如何处理输入元素的一般信息可能会提供一些信息——请查看 Controlled Components 的 Forms，因为 React 有一种完全独立且特殊的方式来处理这些情况。