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

Question

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

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

如果有人只了解特定框架，我会非常有兴趣阅读我的问题的答案，即使它没有被概括。显然，我要再去谷歌搜索一下，但我还没有在这里看到类似的问题，所以我想我会为后代发帖。提前感谢您提供任何见解!

Answer 1

@HDJEMAI 链接到我将重复的这篇文章，因为这是一个很好的建议: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 的另一个原因是确保您的代码可以在典型的网络浏览器 document/window DOM 环境之外的非传统 DOM 上工作，例如“server-side Angular”是一个东西，其中一些 Angular 代码在服务器上运行以预渲染 HTML 以发送到客户端以最小化应用程序启动延迟或允许没有 JavaScript 的网络浏览器访问您的网页，在在这些情况下，普通的 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
  }