问题标签 [virtual-dom]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
99 浏览

javascript - Rx 计时器状态未在 Cycle.js 中更新

当有人单击我打算用作某些元素的不透明度的按钮时,我正在启动一个计时器。当我do用来跟踪该值时,我可以看到它向控制台吐出 40 次,但在视图中数字保持不变。不知道我哪里错了:

更新:原来在超标中有一个小错误导致它出现奇怪的行为。我什至没有将它包含在我的示例中,因为我认为它不相关。

只需将上述更改为(添加类的指示)

让一切都神奇地工作。

0 投票
1 回答
70 浏览

reactjs - 我是否正确理解了 Virtual Dom?

我正在对 React 程序进行基本介绍,并且想知道我是否正确理解了虚拟 dom 的差异。

我有这个小应用程序:

我的问题是,<circles>每当我向状态对象添加一个 svg 时,所有的 svg 都会重新渲染吗?或者 React 是否区分了状态中的那些已经存在并且不需要对它们做任何事情的事实。

0 投票
1 回答
148 浏览

javascript - 使用虚拟 dom 并保持状态时的 CSS 动画

使用 vanilla JS、Redux 来管理状态和虚拟 dom,如何在保持状态的同时为网格中的项目设置动画而不让虚拟 dom 删除更改​​?谢谢!

0 投票
1 回答
190 浏览

reactjs - React virtualDOM 和 real DOM 在处理样式更改时有何不同?

全部:

我对 React.js 很陌生,听说过很多关于 React 虚拟 dom,但我有点想知道它和真实 DOM 在处理像改变元素样式这样的简单案例时的主要区别是什么:

假设我想改变一个 div 与其他人的距离,我可以使用 jQuery:

我对浏览器如何处理真实 dom 的理解是:

  1. 向下搜索 DOM 树并找到该节点。
  2. 根据样式属性更新(我猜是 CSSOM 树)
  3. 渲染视图

所以我的问题是:

  1. 我的理解正确吗?
  2. 如果基本正确,那么虚拟 DOM 做了什么来提升性能呢?它不只是使用 diff 算法来比较其轻量级版本 DOM 树中需要更新的内容并发现 margin-left 需要更新,并将与 jquery 中相同的内容应用于真实 DOM 吗?

或者

  1. 如果不正确,谁能详细说明浏览器对真实 DOM 做了哪些繁重的工作,而 React 虚拟 DOM 跳过以提高性能?

我发现一篇文章提到了关于虚拟 DOM 的 3 个详细操作:

让它真正快速的原因是:

  1. 高效的差异算法。
  2. 批处理 DOM 读/写操作。
  3. 仅有效更新子树。

因此,与此相比,这是否意味着在真实的 DOM 中:

  1. 不是很有效的差异算法或没有差异算法(只更新所有内容)?
  2. 单个读/写操作,例如如果我对相同的 DOM 元素进行 3 次样式更新,浏览器会在 DOM 树中查找该元素 3 次并更新样式?
  3. 从根更新整个DOM(基本上就像转储当前树并重新构建整个DOM树,无论树的哪个部分需要更新,并找到节点并更新)

谢谢

0 投票
1 回答
113 浏览

reactjs - 捕获 React Diff 并手动修补它们

React/react-dom 是否有能力让用户手动比较两个 dom,获取 diff,并手动将 diff 应用到 dom?

就像现在发生的那样,似乎差异和修补的过程是在内部完成的,但我希望单独进行。

0 投票
0 回答
111 浏览

javascript - 虚拟 dom 更改时更新 Rx Observable 列表

我一方面使用virtual-dom,另一方面使用ReactiveJS(RxJs),所以当我通过virtual-dom更新dom时,这不会重新创建dom,它只会更改属性,因此Rx.Observable关联到这个dom,当dom变得更高时没有更新。具体来说是一个分页,可以是显示变化的页数,所以 Rx.Observable 必须关联到新的 dom 链接。任何想法谢谢

0 投票
2 回答
311 浏览

svg - 生成时不渲染 Svg 遮罩

简单吧?事情是这样的,如果我把这个 svg 放到一个 html 文件中,掩码就可以完美地工作。但是当我使用虚拟 dom 生成相同的 svg 时,遮罩没有效果,我们只有一个巨大的红色矩形。

<defs></defs>烦人的是,如果我打开开发人员工具并向 svg添加一个毫无意义的内容,我可以在生成时显示它。这似乎以某种方式踢了 svg 并提醒它需要屏蔽。

有人知道这里发生了什么吗?是否有不涉及设置计时器以注入空的解决方法defs

更新:

这是来源

这是一些相关的进口

更新

在评论的帮助下弄清楚了。这是nodeSvg.node。当我改变它时Svg.node,问题就消失了。问题是:

  1. 为什么要修复它?
  2. 这里的幕后发生了什么使这变得重要?
  3. 可以将其设为类型安全,以便我遇到的问题可能是编译时错误吗?
0 投票
1 回答
657 浏览

javascript - 如何在 virtual-dom 中定义 svg 属性?

有没有办法在虚拟 dom 中使用虚拟超标向节点添加 svg 属性?例如,像这样:

我自己尝试过这样做,但属性在create.

0 投票
2 回答
42500 浏览

dom - Shadow DOM 是否像 React.js 中的 Virtual DOM 一样快?

在我的项目中实现 Shadow DOM 是否会让它们像 React 使用的虚拟 DOM 一样更快?

0 投票
1 回答
4030 浏览

dom - 如果找不到,有没有办法告诉反应动态创建 div

新的反应,我想知道是否有任何解决方法可以解决这个错误:

_registerComponent(...): Target container is not a DOM element.

编辑我想要做的是:

我有一个反应功能,如:

ReactDOM.render(React.createElement(someFunction,{data:someData}),document.getElementById('someID')

生成一个domlike:

现在在上一个 react 调用的下一行,我有其他函数正在尝试使用上面创建的 div 做一些事情:

这给了我:

_registerComponent(...): Target container is not a DOM element.

但我可以看到它存在于 DOM 中

那么如何访问这个虚拟 domdiv呢?并在其中加载一些内容?

PS:我知道一种方法,dangerouslySetInnerHtml但正在寻找一种更好的方法