标签: virtual-dom

我在http://www.youtube.com/watch?v=x7cQ3mrcKaY上看到了React dev的演讲,并且发言人提到模型的脏检查可能很慢.但是,由于虚拟DOM在大多数情况下应该比模型更大,所以虚拟DOM之间的差异实际上并不是很差.

我非常喜欢Virtual DOM的潜在力量(特别是服务器端渲染),但我想知道所有的优点和缺点.

在我的项目中实现Shadow DOM会使它们像React使用的虚拟DOM一样快吗？

Angular 2用什么来更新DOM.是Shadow DOM还是Virtual DOM？Angular 1中有没有这样的概念？

从ReactJS wiki页面关于Virtual DOM:

React创建一个内存中的数据结构缓存,计算产生的差异,然后有效地更新浏览器显示的DOM.这允许程序员编写代码,就像在每次更改时呈现整个页面一样,而React库只渲染实际更改的子组件.

换句话说,Virtual DOM允许我们通过避免使用DOM直接操作来提高性能.

但是React Native怎么样？

我们知道在其他平台上理论上有本机视图和UI组件.DOM本身没有任何内容.那么我们可以说React Native在那里有"Virtual DOM",或者我们正在谈论别的东西吗？

例如,有一个部分在Weex规范,其描述的方法直接DOM树的工作.我的假设是,我们可以认为React Native也应该有某种DOM树以及"Virtual DOM"抽象层,这是React本身的主要思想.

所以我的问题是:

React Native是否有某种"虚拟DOM"(或其表示),如果是这样,这个"虚拟DOM"如何被移植到各种平台？

更新:

此问题的目的是阐明React Native如何管理本机UI组件的呈现.有没有具体的方法,如果有的话,它是如何被官方称为？

更新2:

本文介绍了名为Fibre的新React架构,它看起来像这个问题的答案.

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

据我所知,虚拟DOM是一个由Javascript对象组成的树,父母/子女等,但没有真正DOM的大部分"重"特征.框架(例如React/Vue)通过从头开始创建虚拟DOM来响应模型状态的变化,然后在其虚拟DOM的最后一个版本上执行差异以找出要更改的真实DOM.

我读过的许多内容都声称虚拟DOM更快,因为真正的DOM每次发生变化时都必须重新布局(甚至重新绘制),但事实并非如此 - 只有当需要重新布局时才需要重新布局某些JS代码明确要求某些样式/文本流相关值(例如高度/宽度等).并且可能大多数使用虚拟DOM的框架在这​​方面做得不够好 - 除了确保开发人员不会意外地做到这一点.

此外,最近在某些时候浏览器正在考虑为DOM变异提供事件挂钩,但是这个想法已被放弃,这意味着不应该在DOM被突变的点上触发任何事件.

所以我的问题是,这会带来什么好处呢？JS框架有哪些额外的信息或额外的自由,使其具有执行虚拟DOM优化的"逻辑"能力？

"test"是我的vue数据中的一个对象数组

var vue = new Vue({
  el: '#content',

  data: {
    test: [
      {
        array: [0, 0, 0, 0]
      },
      {
        array: [0, 0, 0, 0]
      }
    ],
    number: 0
  },

  methods: {   
    setNumber: function(){
      this.number = 5;
    },

    setArray: function(){
      this.test[0].array[0] = 9;
    }
  }
})

问题是,如果我更改"数组"中元素的值,而日志显示该值已更改,则它不会在页面上更新.另一方面,如果我改变"数字"的值,则页面上的"数字"和"数组"值都会更新.

<section id="content">
  <div>Value in array: {{ test[0].array[0] }}</div>
  <div>Value in number: {{ number }}</div>
  <!-- {{ setNumber() }} -->
  {{ setArray() }}
</section>

<!-- Loading Vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

如何使我的页面响应"阵列"更新？
这是JsFiddle: …

我理解变量检测在Angular 5.0中是如何工作的.

有人可以帮助我理解React中的相同功能以及它与Angular的不同之处是什么？

假设我们有一个父组件和多个功能子组件。我想清楚地知道父级是否重新渲染，子级是否重新渲染。

在阅读了几篇文章后，我了解到我们可以通过 3 种方法来检测重新渲染。（如果还有更多方法，请告诉我。）

1. 将 a 放入console.log子组件中。

2.在设置中使用Chrome油漆闪烁选项。

3.使用React开发工具

所有这些方法都可以正确地了解组件是否真的重新渲染吗？因为它似乎不能与 React.memo 一起正常工作。

console.log当我用 React.memo 包装子组件时，当父组件重新渲染时，它不会打印，这是正确的。但仍然使用 Chrome 和 React 开发工具突出显示子组件，就像它重新渲染一样。

CodeSandbox： https: //codesandbox.io/s/bold-cloud-iv0rv （如果我们添加一辆新车，静态组件仍然以绿色突出显示，但根据备忘录，它不应该重新渲染。）

现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？

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

我在组件中嵌套了click事件处理程序:

class ListItem extends React.Component {
    ...
    render() {
        return (
            <div onClick={this.save}>
              ...Content...
              <span onClick={this.onDeleteClick}> (Delete)</span>
            </div>
        );
    }
    ...
}

_{(这篇文章底部的完整,最小的例子.)}

此组件用作包含组件中的"列表项".当我点击(Delete)它时会onDeleteClick按预期触发,这会对父进行回调,从而导致组件从父组件中删除.然后点击事件按预期开始冒泡.但是,它会"向上"到父列表中的下一个组件.毕竟,删除处理程序已经删除了原始目标.

如果我添加e.stopPropagation()到onDeleteClick处理程序的顶部它一切正常,但我只是想了解为什么点击事件被传递到一个完全不同的组件,只是为了确保那里没有任何其他吸烟枪.

我当前的理论是,挂起事件队列以某种方式索引到虚拟DOM中,如果您在事件处理程序期间改变虚拟DOM,则冒泡事件可能会传递到虚拟DOM中的错误组件.我原本以为鼓泡事件根本不会发射,而不是射击一个完全不同的组件.

这是怎么回事？任何其他见解？这是一个有缺陷的设计,如果是这样,有关替代品的任何建议吗？

以下是显示问题的最小示例:https://codepen.io/mgalgs/pen/dRJJyB

这是固定版本:https://codepen.io/mgalgs/pen/KqZBKp

"修复"的完整差异是:

--- orig.jsx
+++ new.jsx
@@ -32,6 +32,7 @@
     }

     onDeleteClick(e) {
+        e.stopPropagation();
         this.props.onDeleteClick(e);
     }
 }