问题标签 [virtual-dom]

假设我们想要实现一个removeInlineStyle函数来接收一个 VNode( foo = <Foo style="color: red" />) 并返回一个样式移除的 VNode。

假设在一个函数中，我总是需要设置someState，并且只需要设置someOtherState是否condition为真。

最好这样做：

或这个？

我知道 React 已经过优化，因此快速连续调用setState通常不会导致重新渲染。但是这种行为是否得到保证，或者代码是否应该做出这样的假设？

例如。假设它通过在固定时间间隔上重新渲染来工作，如果第一个setState在该间隔块结束之前被调用，那么第二个setState将导致重新渲染？

我有以下示例网格，其中我将一些新值推送到绑定列表。

按网格中的任意位置将新值推送到网格。

正如您在小提琴中看到的，更新后的单元格将有green500 毫秒的颜色，并且所有重新渲染的元素都将有yellow颜色。

问题是我们应该如何配置Vue组件，以便它只重新渲染更改的元素而不是全部？

如果您查看小提琴控制台输出，您将看到类似 (13001, 26001, ...) 的数字，这等于所有单元格的数量（1000 行 x 13 列）。

Pascal Precht 写了一篇关于 Angular 变更检测的精彩文章。虽然我知道 zone.js 和虚拟 DOM 是完全不同的概念，但 Angular 的 zone.js 是否等同于 React 的虚拟 DOM？如果是，主要区别是什么，如果不是，请简要说明原因。

在反应中，假设我有道具名称 = A、B、C 的 Input 组件。它们按顺序呈现

然后我按照先C再A的顺序更改C和A的状态。 组件A和C按先A然后C的顺序重新呈现。它们不是按状态变化的顺序呈现的（C然后A）

请参阅下面给出的代码片段。我发现输出为

设置 C 的状态

设置 B 的状态

设置 A 的状态

A的渲染

B的渲染

C的渲染

当我将 key 设置为item.id, 并设置三个输入标签a, b, c;

当我单击反向时，组件 Li 将挂载，输入将反向

当我将 key 更改为index时，当我单击反向时，组件 Li 更新，并且输入标签不会改变，

我想知道它是怎么发生的？有没有人发现密钥是如何工作的？

例如，像这样的组件：

我想在BodyContent那个卸载BottomOne和安装上实现一个函数BottomTwo，所以当我激活这个函数时，代码被重组为：

我对 React 很陌生，所以如果有更好的方法，我愿意接受建议，但我真的需要最终结果，即在 BodyContent 上 unmountsBottomOne和 mounts的函数BottomTwo。

我有这个用于卸载和重新安装元素的代码：

当我执行操作时，组件会被交换。问题是没有过渡，切换很粗糙。如何添加动画，比如一个淡出，然后另一个淡入？

如何使用Maquette正确定义单选按钮，以便呈现文本？如果我使用一个<p>元素，文本会出现，但在新行上。

但是，如果我使用<br>元素，则不会出现文本。

我究竟做错了什么？

我从资料中了解到，如果我更新任何组件的状态，那么整个虚拟 dom将被渲染？是真的吗？如果是，那么为什么不调用所有组件的渲染方法？

另外，需要对以下几点进行澄清-

• Virtual Dom 实际上是什么？有什么实际的例子吗？

• 我假设如果我们将虚拟 dom 与实际 dom 进行比较，虚拟 dom 更新 dom 所需的时间比真实 dom 少。但是如何实际证明呢？

• react 如何使用差异算法仅更新发生更改的各个组件（如果我使用 setState 方法）

任何视频讲座将不胜感激。