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

Question

在谷歌上以一种或其他形式遇到以下声明

每次 React 应用程序中的底层数据发生变化时，都会创建用户界面的新虚拟 DOM 表示。这就是事情变得有趣的地方。在 React 中更新浏览器的 DOM 是一个三步过程。

1. 每当任何事情发生变化时，整个 UI 都将在虚拟 DOM 表示中重新呈现。

2. 将计算先前虚拟 DOM 表示与新表示之间的差异。

3. 真正的 DOM 将使用实际更改的内容进行更新。这很像应用补丁。

我是 React 的新手，想了解以上三点在 jQuery（或原生 JS）中是如何在 React 之前的时代工作的。

jQuery

1. HTML 在服务器端构建，发送回浏览器。浏览器将解析、渲染、布局和绘制它。

2. 假设在某个用户事件或加载时创建或隐藏任何新的 DOM 元素。

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

4. 第三点是否仅适用于 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。