Angular 是不是具有与 React 的虚拟 DOM 相当的功能？

Posted 2023-02-22

【中文标题】Angular 是不是具有与 React 的虚拟 DOM 相当的功能？

【英文标题】：Does Angular have the equivalent of React's Virtual DOM?Angular 是否具有与 React 的虚拟 DOM 相当的功能？

【发布时间】：2017-09-19 14:25:48

【问题描述】：

不建议直接在 React 中使用 Bootstrap，因为 Bootstrap 的 javascript 可能会直接改变 DOM，干扰 React 的 Virtual DOM 系统。 Angular (2+) 可以说同样的话吗？

【问题讨论】：

没有 Angular 2 或 4 或它们现在的任何数字，没有或使用某种形式的虚拟域。

angular.io/docs/ts/latest/guide/…

@danimal 链接失效！

它是给我的...尝试去angular.io/docs/ts/latest/guide/component-styles.html 并查看视图封装部分

好的，知道了。那么这是否意味着 Native 封装模式通常应该性能更好，但与 bootstrap JavaScript 不兼容？

【参考方案1】：

React 的 Virtual DOM 术语被重载了。如果您的意思是 React Element - 一个描述 HTML 元素或子组件并在更改检测（协调）期间使用的 JavaScript 对象，那么不，Angular 没有等效项。它只解析一次模板，创建绑定并在更改检测期间处理这些绑定。您可以在我写的比较两个框架中的更改检测的文章中了解更多信息：

What every front-end developer should know about change detection in Angular and React

... 因为 Bootstrap 的 JavaScript 可能会直接改变 DOM，从而干扰 使用 React 的虚拟 DOM 系统。 Angular 也可以这样说

是的，Angular 也可能是这样。你必须小心其他库不要接触 Angular 创建的 DOM。第三方库只能使用他们自己创建的 DOM，但他们需要考虑 Angular 处理的 DOM 更改，例如组件销毁及其 DOM 元素。如果第 3 方库将 DOM 节点附加到组件的视图中，并且 Angular 破坏了宿主 DOM 元素，那么您将发生内存泄漏，因为第 3 方库将保存对不再在 DOM 中的节点的引用。 Angular 提供了使用 DOM 的工具，你可以阅读更多关于它们的信息：

Exploring Angular DOM manipulation techniques using ViewContainerRef