为什么现代JavaScript框架不鼓励与DOM的直接交互 [英] Why do modern JavaScript Frameworks discourage direct interaction with the DOM

问题描述

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

In dealing with JS frameworks like AngularJS, Angular, and React, I've observed that directly interacting with the DOM is discouraged, and can often lead to bugs, if you ignore the warnings. When I say "interacting with the DOM" I mean using document.getElementById('myElement') and similar methods to do some manipulation or read values from the document.

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

My question is essentially Why?. Is this a virtual DOM problem, where React (for example) isn't tracking the actual DOM, and therefore will be caught off guard if you make a change "on your own" without notifying React and subsequently updating the virtual DOM? Would Angular have the same problem in such a case?

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

If someone has knowledge of only a specific framework, I would be very interested to read the answer to my question even if it is not generalized. Obviously, I'm going to go google this some more, but I didn't see a similar question here yet, so I figured I'd post for posterity. Thanks in advance for any insights!

推荐答案

@HDJEMAI链接至此文章，我将重复，因为它是一个很好的建议:

@HDJEMAI linked to this article which I'll repeat, as it's good advice: https://www.reddit.com/r/javascript/comments/6btma7/whats_so_wrong_with_direct_dom_manipulation/

我将在以下一些原因中进行扩展:

I'll expand on some of those reasons below:

• 诸如Angular和React之类的现代框架旨在隐藏DOM，因为它们希望将DOM抽象化.通过直接使用DOM，您将破坏抽象并使代码对框架中引入的更改易碎.

• 有很多原因想要抽象DOM，并且链接到Reddit的页面主要关注状态管理"，因为您的框架(Angular，React等)可能会假设DOM是状态，如果您直接操作DOM将被破坏，例如:

• Modern frameworks like Angular and React are designed to hide the DOM because they want to abstract the DOM away. By using the DOM directly you break the abstraction and make your code brittle to changes introduced in the framework.

• There are many reasons to want to abstract-away the DOM, and the Reddit page linked-to mostly focuses on "state management" because your framework (Angular, React, etc) will likely make assumptions about the DOM's state that will be broken if you manipulate the DOM directly, for example:

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/window DOM环境(例如"document，它将不起作用，例如:

Another reason to abstract away the DOM is to ensure your code works with non-traditional DOMs besides the typical web-browser document/window DOM environment, for example "server-side Angular" is a thing, where some of the Angular code runs on the server to pre-render HTML to send to the client to minimize application startup delay or to allow web-browsers without JavaScript to access your webpages, in these situations the normal W3C DOM is no-longer available, but a "fake" DOM is available but it's provided by Angular - and it only works through Angular's abstractions - it won't work if you manipulate document directly, for example:

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
}

这篇关于为什么现代JavaScript框架不鼓励与DOM的直接交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！