Разбір Virtual DOM: што порівнюе React і чаму це мае значэнне

Інтэрфейсы постаўляюцься ў стані постацейных змян: паказываецца спавешчэнне, калікатар переключаеся, ліст перысвячваецца. Кожная такая змена павінна дасягнуць DOM-а браузера, а неакуратная змена DOM-а — гэта надзеяны спосаб прычыніць медленную роботу сторанкі. Адпаведная рашынка React — это Вярчыны DOM плюс крок аналізу разніцы, які называецца супрацоўка з разніцамі. У гэтым артыкуле поясняецца, што React зберагае ў памяці, як ён выбірае, што зменілася, і чаму гэта дапамагае, ўжо бы вы моглі правільна асцэнаваць змены за дапамогою тачнага ментальнага модэлю.

Чаму прымітанне змян безпосередна ў DOM стае даскладным

До появы React апдэйты UI былі імператывныя: знайсці вузел, зменіць яго.

document.getElementById("title").innerText = "Hello";

Гэта прыемна для маленькай сторанкі. Калі сотні або тыясячі элементаў часта зменяюцца, гэта становіцца і медленным, і складным для керавання, таму што змена DOM можа вымусіць браузер перадзеяць:

• расчыт стылю і макета
• перысвячэнне атрыбутаў наваколішняй контенту

Перамальовка падзейных пікселей

Перыядэнтаванне частака сторанкі

Кожны раз браузер пераскладвае, дзе знаходзяцца элементы, які ў яных размер і якія пікселі трэба перамальаваць. Гэта заведома дорожэ, чым стварэнне або порэванаванне об’ектаў JavaScript. Да гэтых затрат дадаецца тое, што багато фрагментаў коду, якія незалежна працуюць з DOM, спрыяюць таму, што экран можа выйсці за межы синхроназы з станам прыкладнага програмы.

Што на самай працэ ёсць Віртуальны DOM

Рэальны DOM

Рэальны DOM — это жывое дрэва вузлаў, якое браузер стварае на адной вузловай базе з маркапа, па аднам вузлу на кожны элемент. Нават гэта:

<body>
  <h1>Hello</h1>
</body>

стае внутранім дрэвам, якое з’ѐднаецца з распакоўкай і мальованнем, і частае зміненне яго ўсё тое, што запускае вышэўказаную дорогую працу.

Віртуальная рэпрэзентацыя

Вярчыны ДОМ часта называюць лёгкай копіяй рэальнага ДОМ. Тымчасова, гэта ўпіс таго, як павінна выглядаць інтэрфейсная частка: простыя об’екты, якія вяртаюцься компанентамі пад час ўтварэння візуальнага выкладку. React спачатку апдэйтуе гэты упіс, а пазней вплывае на браузер. Одны элемент выглядае прыбліжна так:

{
  type: "h1",
  props: {
    children: "Hello"
  }
}

Такія об’екты лёгкая ствараць і пораўняваць, таму React можа з’ясаваць, што зменілася, прычым перад выкананнем будзь-яых рэальных операцый над ДОМ. JSX — гэта проста сынтаксіс для стварэння такіх об’ектаў.

Ад першага выкладку да зменёнай структуры

Пад час першага выкладку такога компаненту:

function App() {
  return <h1>Hello World</h1>;
}

React стварае вярчыны дрэва, стварае адпаведныя вузлы ДОМ і вставляе іх у стораніцу. Цяпер два дрэва збігаюцца, і інтэрфейс стае видным.

Пазней прыемальнік кліка можа апдэйтуваць стан:

setCount(count + 1);

Або яшчэ – калі абяцейка пасылае новыя пропсы. Гэта сігналізуе, што частка UI можа патрабаваць змены. React не адразу правіляе DOM; ён плануе новую рэндарызацію, а апдэйты з таго ж заходу зазвычай об’еднваюцца ў адной групе.

Пад час гэтай рэндарызаціі React зноў вызывае компонент і отрымае новыя дрэв’яны структуры, тады ён мае як пакойшуюся версію, так і новую. Старая дрэваная структура:

<h1>Hello</h1>

Новая дрэваная структура:

<h1>Hello Omer</h1>

Задача – точна выявіць, што зменілася.

Спраўа збагачэння: як працюе аналіз разніцы

Спраўа збагачэння значыць порэванаванне пакойшайшага віртуальнага дрэва з новым; сам практык порэванавання зазвычай называецца аналізам разніцы. Для кожной пазіцыі React запытаеся, чы рэлемент зменіўся, застаўся такім жа, чы быў даданы або адчынены. Канцэптуальна:

Old Tree  VS  New Tree

Мета — здійсніць мінімальны набор змян, які ператвараюць стары інтерфейс у новы. Полны абстрактны аналіз розніцы дрэва будзе занадта повольны, таму React выкарыстоўвае два методы. Якщо змінюецца тип элемента, напрыклад з div на span, React заменяе цэю паддрэсь узамест на падбіранне яе дзецяў. У лістах вон падбирае дзецей за key, таму так важлівы стабільныя ключы: яны паведамляюць React, што элемент перасунуўся, а не заменіўся.

Калі змінюецца толькі текст

Раней:

<h1>Hello</h1>

Пасля:

<h1>Hello Omer</h1>

<h1> мае той самы тип у там жа месцы; змінюецца толькі яго текст. Таму React застаўляе існуючы вузол DOM і апдэйтуе толькі вузел тексту, узамест на стварэнне новага элемента. Айскачанне кожной операцыі, якая не ўпэўнена патрэбна, — галоўная частка оптымізацыі.

Этап збережэння: прыменяецца толькі тое, што змянілася

Пасля вычыслення разніцы React запішае отрыманыя змянення ў рэальны DOM:

• адкорекцыя тексту
• змена або адчыненне атрыбутаў
• аддаванне новых элементаў
• выдаленне элементаў, якія з’явіліся

Это ўсё – этап збережэння, едынственная точка, дзе React паўтарае змянення ў DOM, і ён зменяе толькі тое, што пазначыла разніца. Потым браузер перамальёвае паўнажныя аб’екты. Чыстае разумеванне процесу пераходу ад збережэння да пікселей можна знайсці ў нашай адгукі пра перамальёванне React ад змян стану да пікселей экрана.

Звядзеюцься з выгодай у продуктывасці

Прыткасць досягаецца за рахунак меньшай колькасці дорогіх операцый з DOM. Уместо таго, каб перзначыць усё, React парабялівае старыя і новыя апісанні, вырахоўвае мінімальныя разлікі і паўтарае дзейства толькі з тымі вузламі, якія парадужаны. Паколькі парабяліванне об’ектаў дышчы дарожэй, чым мутацыі DOM, гэта зазвычай дапамагае у вялікіх прыемох.

Две умаўкі памагаюць застацца аднойчынымі з рэальнасцю. Вяртуальны DOM не ўласна шырэй, чым рэгулярна налаштаваны код DOM; яго ценнасць — у можлівасці пісаць декларатыўны UI, пры чым заўсёды атрымваць каляскія апдэйты. А рендарынг не ўжо безкоштовны: React заўсёды вызывае вашы компоненты і парабялівае ўсё, што яны выдаюць, таму захопленне ад непатрэбных паўтарных рендароў застаецца важным.

Ключовыя выводы

• Вяртуальны DOM — это набор простых об’ектаў, якія апісваюць бажаны UI і перзначаюцца ў кожны раз, калі вядзецца рендарынг.

Спакоўванне разніцы межу старым і новым дрэвамі з выкарыстоўванням типу элемента і key як скорачэнняў.

Этап комітавання — ёдын момент, калі React запісвае даныя ў DOM, і ён запісвае толькі разніцы.

Вы жерчыце частку роботы з адрасаваннем і спакоўванням разніцы зарады значна меншых і дорожэйых мутацый DOM і простейшагі моделі програмавання.