React 内部:React 如何知道如何正确地重新渲染 iframe?
React internals: How does React know how to rerender an iframe correctly?
我正在尝试使用 React 并重新呈现 iframe,但我不确定 React 如何正确地重新呈现 iframe,尤其是那些指向文本编辑器的 iframe。这是一个显示此内容的 jsFiddle:
https://jsfiddle.net/augburto/fkqnm329/2/
我指向的文本编辑器并不重要,但我正在做的是当您单击“触发更新”时,它会调用一个 setInterval
,它会不断设置一个新状态,从而触发重新渲染。
我想可能会发生的是,当我输入 iframe
时,它有一个 textarea
,它不可避免地会重新呈现,从而使我失去文本编辑器的位置,但不知何故我尽管在 console.log
中看到了重新渲染,但仍能够毫无问题地无缝输入。请注意,我并不是建议它应该这样做——我只是想知道为什么它不这样做。我知道 React internals do some smart things like transactions 但我不希望它保持我的光标位置或我选择的内容。
那么 React 如何更具体地处理重新渲染 iframe?我读过文章(即 this and this,但我觉得它们并没有阐明很多)。它与常规 DOM 元素有什么不同吗?
好的,一段时间后,我想我相信我找到了答案。一般来说,因为 React 只是创建一个虚拟 DOM 并在幕后进行比较,所以它实际上只查看 iframe 元素,而不是生成的内容。这是完全独立的事情,iframe 在其中创建自己的浏览上下文。阅读 MDN documentation on iframe 确实提供了很多信息:
The HTML element represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.
我认为 React 在解析 iframe
时确实做了一些特殊的事情,但总的来说它并没有偏离太多。
另外一个我认为可能有用的信息是 React 通常如何处理输入元素——看一下 Controlled Components Forms 的一般情况,因为 React 有一种完全独立和特殊的方式来处理这些情况。
我正在尝试使用 React 并重新呈现 iframe,但我不确定 React 如何正确地重新呈现 iframe,尤其是那些指向文本编辑器的 iframe。这是一个显示此内容的 jsFiddle:
https://jsfiddle.net/augburto/fkqnm329/2/
我指向的文本编辑器并不重要,但我正在做的是当您单击“触发更新”时,它会调用一个 setInterval
,它会不断设置一个新状态,从而触发重新渲染。
我想可能会发生的是,当我输入 iframe
时,它有一个 textarea
,它不可避免地会重新呈现,从而使我失去文本编辑器的位置,但不知何故我尽管在 console.log
中看到了重新渲染,但仍能够毫无问题地无缝输入。请注意,我并不是建议它应该这样做——我只是想知道为什么它不这样做。我知道 React internals do some smart things like transactions 但我不希望它保持我的光标位置或我选择的内容。
那么 React 如何更具体地处理重新渲染 iframe?我读过文章(即 this and this,但我觉得它们并没有阐明很多)。它与常规 DOM 元素有什么不同吗?
好的,一段时间后,我想我相信我找到了答案。一般来说,因为 React 只是创建一个虚拟 DOM 并在幕后进行比较,所以它实际上只查看 iframe 元素,而不是生成的内容。这是完全独立的事情,iframe 在其中创建自己的浏览上下文。阅读 MDN documentation on iframe 确实提供了很多信息:
The HTML element represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.
我认为 React 在解析 iframe
时确实做了一些特殊的事情,但总的来说它并没有偏离太多。
另外一个我认为可能有用的信息是 React 通常如何处理输入元素——看一下 Controlled Components Forms 的一般情况,因为 React 有一种完全独立和特殊的方式来处理这些情况。