问题标签 [virtual-dom]

目前正在尝试使用 D3 数学构建一些 React 组件。然而，当涉及到过渡/动画时，有点像面对墙。这并不简单。

我看到人们正在使用像 GreenSock 这样的库。这对虚拟 DOM 有何影响？GSAP 是否也直接操作 DOM？如果是，那不是 React 的 NOGO 吗？

我正在使用 React 构建一个大型应用程序，其中共享父组件处理多个子组件的所有状态。其中一些孩子呈现超过 1000 个项目的列表。

我意识到在父级内部切换布尔值setState将重新渲染父级，进而再次渲染其所有子级。

我的问题是，如果子项的列表项都没有更改，那么重新渲染是否会导致子项循环并重新构建庞大的列表——每次父项重新呈现时？

虚拟 DOM 在其中扮演什么角色？孩子是否重新构建列表但 DOM 永远不必更新，因为 diff 看到列表元素没有改变？

编辑：最后，如果是这种情况，该key属性如何影响列表重新渲染？如果我有 1000 个项目都具有唯一键，但 3 个项目的键是null, （意味着它们具有相同的键值）那么整个列表是否会重新呈现？

React 关于和解的文档说

当孩子有键时，React 使用键将原始树中的孩子与后续树中的孩子进行匹配。

我知道每个列表项都有一个唯一的键，当列表项不更改时，不必更新 DOM。

但是，当您有一个包含 1000 个元素且具有唯一键的大型列表，但 3 个元素具有重复键时会发生什么？所有其他具有唯一键的列表项是否可以安全地再次重新呈现？或者，具有相同密钥的少数项目是否render对差异算法无用？

我有一个关于 Angular 2 内部 DOM 操作的“简单”问题。Angular 2 是使用虚拟 DOM、增量 DOM 还是什么。我一直在互联网上寻找了解 Angular 2 在内部用于 DOM 操作的内容，但我似乎找不到它。

我了解他们如何创建组件以及他们如何让我们开发人员使用我们想要的封装策略。

我知道它使用区域来检测更改并使用可观察对象来应用更改，但是他们是否为内部 DOM 操作提出了自己的逻辑，还是在真实 DOM 上进行操作？

React 有虚拟 dom，Ember 使用 glimmer，其他框架使用增量 dom。Angular 2 使用什么？

TIA。

当我在浏览器中键入时，我正在尝试更改反应控制输入的值。

我提供了一个代码示例。

如果前两个输入有值，则自动填充第三个输入。但是如果它们是空的，我怎么能让用户直接输入第三个字段的值呢？

I'm having difficulties similar to this unanswered question: Purescript: Halogen HTML DSL only Renders "id" tags

I'm trying to define a new HTML element. In particular, I would like to display an svg elem and image element with some new tags, like x_, and y_.

I'm defining the element like so:

And then attributes I would like:

When I create the element, the program compiles, however only the <image></image> tags are rendered, without the specified attributes. It seems like the way halogen interfaces with virtual-dom does not allow me to do this, however, I'm not sure why.

In general, why can't I just add any attributes to a div, svg, or image element? I'm not using Halogen.HTML.Indexed for any of these elements. Is that the problem?? Is the type checker just missing the fact that these combinations are not allowed because I haven't specified them??

In general, I would like to do something even like:

and then call

image [ customProperty "myProperty" "myPropertyValue" ] []

and have that attribute rendered.

========================

Edit: Reading through the source code, it seems that namespace has something to do with it, however, I'm not sure how to find the namespace of an already constructed element.

它似乎正在根据控制台日志更新状态数组。我可能错过了有关渲染如何与处理程序或生命周期本身一起工作的内容（抱歉仍在学习 React）。我是否应该将其发送到另一个组件，然后在我的页面上呈现该自定义组件？这是简化的代码。

当我只是添加一个元素（不是数组）时，我在更新元素的状态时没有问题，基本上从无到有。现在我连接到我的数组中，我猜我的生命周期不会让我在页面第一次加载时解决数组中的 [0] 索引？我确定我在这个 DOM（虚拟 DOM）生命周期的东西中遗漏了一些订单操作。这一切对我来说都很新鲜。您如何处理添加状态数组对象时的渲染（显然从什么都没有开始）。

我想使用 Maquette 作为基本的超脚本语言。因此，我不想使用maquette.projector. 但是，我很难让任何maquette.dom功能正常工作。

我究竟做错了什么？为什么dom.create不渲染任何东西？

来自关于 Virtual DOM的 ReactJS wiki页面：

React 创建一个内存数据结构缓存，计算结果差异，然后有效地更新浏览器显示的 DOM。这允许程序员编写代码，就好像每次更改都会呈现整个页面，而 React 库只呈现实际更改的子组件。

换句话说，Virtual DOM 允许我们通过避免直接操作 DOM 来提高性能。

但是React Native呢？

我们知道，理论上在其他平台上存在原生视图和 UI 组件。DOM 本身并没有什么。那么我们可以说 React Native 有“虚拟 DOM”还是我们在谈论其他东西？

例如，Weex规范中有一节描述了直接使用 DOM-tree 的方法。我的假设是，我们可能会认为 React Native 也应该有某种 DOM 树以及“虚拟 DOM”抽象层，这是 React 本身的主要思想。

所以我的问题是：

React Native 是否有某种“虚拟 DOM”（或其表示形式），如果有，如何将这种“虚拟 DOM”移植到各种平台？

更新：

这个问题的目的是阐明 React Native 如何管理原生 UI 组件的渲染。有没有具体的方法，如果有，它是如何正式命名的？

更新 2：

本文描述了名为Fiber的新 React 架构，它看起来像是这个问题的答案。

是否可以在虚拟 DOM 上获取事件目标的父节点？

在我的基本反应组件中，我有一个从 onClick 事件触发的方法，我想获取父虚拟 DOM 节点属性。