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

小编典典

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

reactjs

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

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

如果某人只了解一个特定的框架，那么即使我的问题没有被概括，我也会很感兴趣阅读它的答案。显然，我将继续在Google上进行搜索，但是我在这里还没有看到类似的问题，因此我认为我会为后代发帖。预先感谢您的任何见解！

阅读 307

2020-07-22

共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的网络浏览器访问您的网页，在这种情况下，常规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
```
}

2020-07-22