Почему современные JavaScript-фреймворки препятствуют прямому взаимодействию с DOM

Question

Обращаясь к JS-фреймворкам, таким как AngularJS, Angular и React, я заметил, что прямое взаимодействие с DOM не рекомендуется и может привести к ошибкам, если вы игнорируете предупреждения.Когда я говорю «взаимодействовать с DOM», я имею в виду использование document.getElementById('myElement') и аналогичных методов для выполнения каких-либо манипуляций или чтения значений из документа.

Мой вопрос по существу Почему? .Является ли это проблемой виртуального DOM, когда React (например) не отслеживает фактическое DOM и, следовательно, будет застигнут врасплох, если вы внесете изменение «самостоятельно», не уведомив React и впоследствии не обновив виртуальное DOM?Будет ли у Angular такая же проблема в таком случае?

Если у кого-то есть знания только о конкретной среде, мне было бы очень интересно прочитать ответ на мой вопрос, даже если он не обобщен.Очевидно, я собираюсь пойти на Google еще немного, но я не видел подобного вопроса здесь, поэтому я решил опубликовать для потомков.Заранее спасибо за любые идеи!

Answer 1

Действительно хороший ответ от @Dai выше, я хотел бы добавить к этому.В большинстве случаев вы не должны манипулировать домом напрямую.Есть случаи, когда это необходимо, и это правильно.

Например, в React и Vue есть концепция ref.Который может быть похож на id и дает вам доступ к dom-узлу.Допустим, вы создаете приложение для чата, в котором вы выбираете старые чаты, когда пользователь прокручивает вверх, и вам нужно держать в фокусе последний видимый чат.

Такие ситуации существуют, и нам нужен доступ кдоминионХорошей практикой является сохранение такого кода в инкапсуляции и использование базового способа доступа к чему-либо вместо обращения к документу / dom.

Answer 2

@ 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 состоит в том, чтобы ваш код работал с нетрадиционными DOM, кроме типичной среды DOM веб-браузера document / window, например " Angular на стороне сервера"это вещь, когда часть кода Angular запускается на сервере для предварительной визуализации HTML-кода для отправки клиенту, чтобы минимизировать задержку запуска приложения или позволить веб-браузерам без JavaScript получить доступ к вашим веб-страницам, в этих ситуациях обычный W3CDOM больше не доступен, но «поддельный» 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
  }