内存中的 ReactJS 虚拟 DOM 和应用增量更改

Question

在谷歌上以一种或其他形式遇到以下声明每次 React 应用程序中的底层数据发生变化时，都会创建用户界面的新虚拟 DOM 表示。这就是事情变得有趣的地方。在 React 中更新浏览器的 DOM 是一个三步过程。每当任何事情发生变化时，整个 UI 都将在虚拟 DOM 表示中重新呈现。将计算先前虚拟 DOM 表示与新表示之间的差异。真正的 DOM 将使用实际更改的内容进行更新。这很像应用补丁。我是 React 的新手，想了解以上三点在 jQuery（或原生 JS）中是如何在 React 之前的时代工作的。jQueryHTML 在服务器端构建，发送回浏览器。浏览器将解析、渲染、布局和绘制它。假设在某个用户事件或加载时创建或隐藏任何新的 DOM 元素。jQuery 会重新创建完整的 DOM 吗？从上面提到的第三点来看，React 只更新已更改部分的 DOM，但其他系统（主要是 jQuery 或原生 JS）将重新创建完整的 DOM。那是对的吗？第三点是否仅适用于 DOM 更改，或者甚至当任何 UI 组件的状态更改（例如填充文本框/下拉菜单等）时？

Answer 1

jquery 会重新创建完整的 DOM 吗？从上面提到的第三点来看，React 只更新已更改部分的 DOM，但其他系统（主要是 jquery 或原生 js）将重新创建完整的 DOM。那是对的吗？

jQuery

---

不，jQuery 不会重新创建 DOM。相反，它使用提供的选择器导航 DOM 树以进行适当的更改。这使得 jQuery 与 React 非常相似，但它的性能问题伴随着代码的设计方式和外观设计模式的大量使用。这对于任何需要支持多种浏览器（如 Chrome、Firefox、Opera 等）的大型库来说都是正常的。

角 1

---

用于重绘整个 DOM 的框架是 Angular 1。客户端会进行一些更改，并在调用$scope.apply或 时$scope.digest重新渲染。这一点，再加上大页面上大量的双向数据绑定侦听器，是 Angular 必须进行重大更改以保持竞争力的重要原因之一。Angular 8 可能等同于 React，但其中一个的采用率高于另一个。

反应

---

React 只更新被改变的 DOM。这是其“秘方”的一部分。随着其以组件为中心的架构和早期采用一种数据绑定方式，它已经取得了很大的成功。可以说 React 开始变得更加臃肿，因为它被广泛采用。对于任何获得主流使用的项目来说，这都是正常的。人们将 React 视为一大堆性能问题只是时间问题，我们将创建一个新框架。

备择方案

---

还有比 React 更快的框架，比如Elm lang。没有什么能打败纯 Javascript（例如document.querySelector()），因为在其核心，所有框架都使用它。那时，您开始进行其他权衡，例如缺乏您可以依赖的外部库，或者难以维护大型前端代码库。

---

第三点是否仅适用于 dom 更改或什至当任何 UI 组件的状态更改（例如填充文本框/下拉菜单等）时？

对于 jQuery 或纯 JS，第三点是不正确的。有一个自定义on-click处理程序，它会运行一个进行小改动的函数。

对于像 Angular 这样的东西，如果有改变scope触发重绘，那可能是真的。这同样适用于 React。如果你的submit按钮应该将你重定向到一个完全不同的页面，它基本上会重新绘制 DOM。