为什么现代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的另一个原因是确保您的代码与典型的Web浏览器document/ windowDOM环境之外的非传统DOM一起工作,例如" 服务器端Angular "是一个东西,其中一些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
  }