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

Question

在 google 上以一种或其他形式在statement 下方看到

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

1. 只要有任何改变，整个 UI 都会重新渲染 在虚拟 DOM 表示中。

2. 与上一个的区别 将计算虚拟 DOM 表示和新的表示。

3. 该 真正的 DOM 将使用实际更改的内容进行更新。这是非常 就像应用补丁一样。

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

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 非常相似，但它的性能问题来自于代码的设计方式以及大量使用 facade design pattern。这对于任何需要支持多种浏览器（如 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。