问题标签 [virtual-dom]

我试图在 UI 上的某些功能中返回一个按钮并得到一个奇怪的错误。有人可以帮忙吗。

我得到的错误是：

参数列表后缺少 )。

我需要根据父元素设置组件尺寸。是否可以在渲染之前通过 ref 从 virtualDOM 获取父级的宽度和高度？

家长

我需要在孩子的构造函数中获取尺寸。

像这样的东西是可能的this.refs.container.offsetWidth吗？

我正在尝试将一些 Javascript 注入到使用 React 构建的网站中。代码需要访问 React Renderer。

我正在运行ReactDevTools 扩展，它允许我执行如下代码：

有没有办法在不运行 ReactDevTools 扩展的情况下通过 JS 注入访问组件？

如前所述，我想使用 Maquette 作为基本的超脚本语言。因此，我不想使用maquette.projector. 然而，尽管能够将使用 Maquette 制作的 SVG 对象附加到 DOM，但 DOM 似乎并没有更新。例如，在下面的代码中，我希望能够单击一个按钮来创建一个圆圈。如果我使用 Chrome 开发工具检查 DOM，我可以将 SVG 圆对象添加到 DOM，但 DOM 尚未更新。我应该如何更新 DOM？

为什么appendChild不渲染任何东西？

我正在尝试使用 React 并重新渲染 iframe，但我不确定 React 如何正确重新渲染 iframe，尤其是指向文本编辑器的 iframe。这是一个显示此内容的 jsFiddle：

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

我指向的文本编辑器并不重要，但我正在做的是当您单击 Trigger Update 时，它​​会调用 a setInterval，它将不断设置新状态并因此触发重新渲染。

我认为可能发生的情况是，当我输入iframewhich has atextarea时，它将不可避免地重新呈现，从而使我失去文本编辑器的位置，但不知何故，尽管看到重新呈现在console.log. 请注意，我并不是建议它应该这样做——我只是想知道为什么它不这样做。我知道React 内部做了一些聪明的事情，比如事务，但我不希望它保持我的光标位置或我选择的内容。

那么 React 如何更具体地处理重新渲染 iframe呢？我读过文章（即this和this，但我觉得它们并没有对它有很多启发）。它与常规的 DOM 元素有什么不同吗？

互联网上有很多 SO 问题和博客试图解释什么是虚拟 dom，但这个问题是关于为什么这种优化必须在 JavaScript 中/作为框架的一部分来实现，而不是由浏览器本身实现。

据我了解，虚拟 DOM 是由 Javascript 对象组成的树，具有父/子等，但没有真实 DOM 的大部分“重”特性。框架（例如 React/Vue）通过从头开始创建一个虚拟 DOM 来响应模型状态的变化，然后在其虚拟 DOM 的最后一个版本上进行比较，以确定要更改的真实 DOM。

我读过的许多东西都声称虚拟 DOM 更快，因为每次发生变化时，真实 DOM 都必须重新布局（甚至重新绘制），但这不是真的 - 仅在以下情况下才需要重新布局一些 JS 代码明确要求一些样式/文本流相关的值（例如高度/宽度等）。并且大概大多数使用虚拟 DOM 的框架在这​​方面都做得不好——除非确保开发人员不会意外地这样做。

此外，最近浏览器正在考虑为 DOM 变异提供事件挂钩，但该想法已被放弃，这意味着在 DOM 变异时不需要触发任何事件。

所以我的问题是，这会带来什么好处？JS 框架有哪些额外的信息或额外的自由度赋予它执行虚拟 DOM 优化的“逻辑”能力？

在使用递归函数读取用户拖放文件时，我遇到了 Angular 2 更改检测的一个奇怪问题。

参考这里的例子：

文件放置示例：plnkr.co

在上面的示例中，有两个文件放置区域。顶部区域使用递归函数来读取用户丢弃项目中的所有文件。底部区域只需使用dataTransfer.files.

丢弃的文件应该显示在下面。但是，更改检测仅适用于底部放置区域。

这是我实际应用程序的简化版本。我不热衷于使用ChangeDetectorRef来触发检测（我知道它适用于 plunker 示例）。

有没有更好的方法来读取所有放入的文件（包括子文件夹中的文件）webkitGetAsEntry()？或者另一种方法可以与角度变化检测一起使用？

我在 Angular 2.4.9 上。

我正在使用带有卤素的MDL lite 。MDL 主要依赖 CSS，但它为各种功能添加了一些 JS。

当与 VDom 方法一起使用时，这会产生不幸的后果。例如，修改输入后的textfield应用is-dirty类 - 除其他外，这会使标签文本不可见（默认情况下，它与输入字段中的占位符类似地显示）。

我的渲染代码没有意识到这一点，当它重新渲染时，这个类被删除，导致标签显示在输入值的顶部。

我对此的直接解决方案是我可以在我的组件中重新创建一些逻辑，根据需要添加这个类。还有其他方法吗？我们能以某种方式告诉 VDom 渲染器不要触摸某些元素吗？

不建议直接将 Bootstrap 与 React 一起使用，因为 Bootstrap 的 JavaScript 可能会直接改变 DOM，从而干扰 React 的 Virtual DOM 系统。有人可以对 Angular (2+) 说同样的话吗？

我对什么是虚拟 dom 有一个粗略的了解，但我不明白如何以及如何构建一个虚拟 dom“库”。以下是我目前所知道和理解的：

• 变成真实节点的虚拟节点
• 变成真实文本节点的虚拟文本
• 观察变化（元素的状态）以避免重新渲染？

以下是我发现的一些有用资源：

• 虚拟 Dom 与 Dom
• 什么是虚拟DOM？

我在正确的轨道上吗？

谢谢！