为什么现代 JavaScript 框架不鼓励与 DOM 直接交互

在处理 AngularJS、Angular 和 React 等 JS 框架时，我发现不鼓励直接与 DOM 交互，如果忽略警告，通常会导致错误。当我说“与 DOM 交互”时，我的意思是使用document.getElementById('myElement')和类似的方法来进行一些操作或从文档中读取值。

我的问题本质上是Why?。这是一个虚拟 DOM 问题吗？例如，React 没有跟踪实际 DOM，因此如果您“自行”进行更改而不通知 React 并随后更新虚拟 DOM，那么您会措手不及？在这种情况下 Angular 会遇到同样的问题吗？

如果有人只了解特定框架，我会很有兴趣阅读我的问题的答案，即使它不是概括的。显然，我要去谷歌更多，但我还没有在这里看到类似的问题，所以我想我应该为后代发布。预先感谢您的任何见解！

@HDJEMAI 链接到这篇文章，我将重复该文章，因为这是一个很好的建议：https://www.reddit.com/r/javascript/comments/6btma7/whats_so_wrong_with_direct_dom_manipulation/ https://www.reddit.com/r/javascript/comments/6btma7/whats_so_wrong_with_direct_dom_manipulation/

我将在下面详细阐述其中一些原因：

• 像 Angular 和 React 这样的现代框架旨在隐藏 DOM，因为它们希望将 DOM 抽象出来。通过直接使用 DOM，您会破坏抽象并使代码对框架中引入的更改变得脆弱。

• 想要抽象 DOM 的原因有很多，链接到的 Reddit 页面主要关注“状态管理”，因为你的框架（Angular、React 等）可能会对 DOM 的状态做出假设，如果你可以直接操作 DOM，例如：

  function this_is_your_code() {
  
      tell_angular_to_make_my_sidebar_500px_wide();
  
      document.getElementById('mysidebar').style.width = 700px;
  
      var sidebar_width = ask_angular_for_sidebar_width();
      console.log( sidebar_width ); // will print "500px"
  }
  

• 抽象 DOM 的另一个原因是确保您的代码除了典型的 Web 浏览器之外还可以与非传统 DOM 一起使用document/windowDOM环境，例如“服务器端 Angular https://medium.com/@cyrilletuzi/angular-server-side-rendering-in-node-with-express-universal-engine-dce21933ddce” 是这样的，一些 Angular 代码在服务器上运行，以预渲染 HTML 发送到客户端，以最大限度地减少应用程序启动延迟或允许没有 JavaScript 的 Web 浏览器访问您的网页，在这些情况下，正常的 W3C DOM不再可用，但“假”DOM 可用，但它是由 Angular 提供的 - 而且它只能通过 Angular 的抽象起作用 - 如果你操作它就不起作用document直接，例如：

  function this_is_your_code_that_runs_in_nodejs() {
  
      tell_angular_to_make_my_sidebar_500px_wide(); // this works and Angular's built-in abstraction of the DOM makes the appropriate change to the rendered server-side HTML
  
      document.getElementById('mysidebar').style.width = 500px; // fails because `document` is not available
  }