Какво е виртуален DOM и защо React го използва?

Блог

Какво е виртуален DOM и защо React го използва?

Royal DOM

Първо на първо място, DOM означава Document Object Model. DOM с прости думи представлява потребителския интерфейс на вашето приложение. Всеки път, когато има промяна в състоянието на потребителския ви интерфейс на приложението, DOM се актуализира, за да представи тази промяна. Сега уловът често се манипулира, DOM влияе на производителността, което я прави бавна.

Какво прави DOM манипулацията бавна?

DOM е представен като дървовидна структура от данни. Поради това промените и актуализациите на DOM са бързи. Но след промяната, актуализираният елемент и неговите деца трябва да бъдат повторно визуализирани, за да актуализират потребителския интерфейс на приложението. Повторното изобразяване или пребоядисване на потребителския интерфейс го прави бавен. Следователно, колкото повече компоненти на потребителския интерфейс имате, толкова по-скъпи биха могли да бъдат актуализациите на DOM, тъй като те ще трябва да се преобразяват отново за всяка актуализация на DOM.

Виртуален DOM

Тук идва концепцията за виртуален DOM и се представя значително по -добре от истинския DOM. Виртуалният DOM е само виртуално представяне на DOM. Всеки път, когато състоянието на нашето приложение се променя, виртуалният DOM се актуализира вместо реалния DOM.

Е, може да попитате Не виртуалният DOM прави ли същото като истинския DOM, това звучи като двойна работа? Как може това да бъде по -бързо от просто актуализиране на истинския DOM?

Отговорът е, че виртуалният DOM е много по -бърз и ефективен, ето защо.

Как Virtual DOM е по -бърз?

Когато се добавят нови елементи към потребителския интерфейс, се създава виртуален DOM, който е представен като дърво. Всеки елемент е възел на това дърво. Ако състоянието на някой от тези елементи се промени, се създава ново виртуално DOM дърво. След това това дърво се сравнява или различава с предишното виртуално DOM дърво.

След като това е направено, виртуалният DOM изчислява най -добрия възможен метод за извършване на тези промени в истинския DOM. Това гарантира, че има минимални операции с истинския DOM. Следователно, намаляване на разходите за изпълнение на актуализирането на реалния DOM.

Изображението по -долу показва виртуалното DOM дърво и различния процес.

Червените кръгове представляват възлите, които са се променили. Тези възли представляват елементите на потребителския интерфейс, чието състояние е променено. След това се изчислява разликата между предишната версия на виртуалното DOM дърво и текущото виртуално DOM дърво. След това цялото родителско поддърво се преобразява, за да даде актуализирания потребителски интерфейс. Това актуализирано дърво след това се актуализира пакетно до истинския DOM.

Как React използва Virtual DOM

Сега, когато имате добро разбиране за това какво е Virtual DOM и как може да помогне с производителността на вашето приложение, нека разгледаме как React използва виртуалния DOM.

В React всяка част от потребителския интерфейс е компонент и всеки компонент има състояние. React следва наблюдавания модел и се вслушва в промени в състоянието. Когато състоянието на компонент се промени, React актуализира виртуалното DOM дърво. След като виртуалният DOM е актуализиран, React сравнява текущата версия на виртуалния DOM с предишната версия на виртуалния DOM. Този процес се нарича различен.

След като React знае кои виртуални DOM обекти са се променили, React се актуализира само тези обекти, в истинския DOM. Това прави производителността далеч по -добра в сравнение с директното манипулиране на истинския DOM. Това прави React открояваща се като високоефективна JavaScript библиотека.

как да купя etn с usd

С прости думи, вие казвате на React в какво състояние искате да бъде потребителският интерфейс и той гарантира, че DOM съвпада с това състояние. Голямата полза тук е, че като разработчик няма да е необходимо да знаете как манипулирането на атрибутите, обработката на събития или ръчните актуализации на DOM се случват зад кулисите.

Всички тези подробности са абстрахирани от разработчиците на React. Всичко, което трябва да направите, е да актуализирате състоянията на вашия компонент както и когато е необходимо, а React се грижи за останалото. Това гарантира превъзходно изживяване на разработчиците при използване на React.

React render () функция

render () е мястото, където потребителският интерфейс се актуализира и изобразява. render () е необходимия метод за жизнен цикъл в React. Можете да научите повече за методите на жизнения цикъл на React подробно от моя блог пост .

render () function е точката на влизане, където се създава дървото от React елементи. Когато състояние или подпора в рамките на компонента се актуализира, render () ще върне различно дърво от React елементи. Ако използвате setState () в рамките на компонента React незабавно открива промяната на състоянието и изобразява отново компонента.

След това React изчислява как ефективно да актуализира потребителския интерфейс, за да съответства на най -новите промени в дървото.

Това е, когато React първо актуализира своя виртуален DOM и актуализира само обекта, който се е променил в истинския DOM.

Пакетна актуализация

React следва механизъм за пакетно обновяване, за да актуализира истинския DOM. Следователно, води до повишена производителност. Това означава, че актуализациите на истинския DOM се изпращат на партиди, вместо да изпращат актуализации за всяка промяна в състоянието.

Пребоядисването на потребителския интерфейс е най -скъпата част и React ефективно гарантира, че истинският DOM получава само пакетни актуализации за пребоядисване на потребителския интерфейс.

Обобщение

  • Честите DOM манипулации са скъпи и тежки за изпълнение.
  • Virtual DOM е виртуално представяне на истинския DOM.
  • Когато настъпят промени в състоянието, виртуалният DOM се актуализира и се сравнява предишната и текущата версия на виртуалния DOM. Това се нарича различаване.
  • Виртуалният DOM след това изпраща пакетна актуализация до истинския DOM, за да актуализира потребителския интерфейс.
  • React използва виртуален DOM, за да подобри производителността си.
  • Той използва наблюдаваното за откриване на промени в състоянието и поддръжката.
  • React използва ефективен алгоритъм за разлика, за да сравнява версиите на виртуалния DOM.
  • След това се уверява, че пакетните актуализации се изпращат до истинския DOM за пребоядисване или повторно изобразяване на потребителския интерфейс.

Благодаря за четенето

Ако тази публикация ви е харесала, споделете я с всички ваши приятели по програмиране!

Следвай ни в Facebook | Twitter

Допълнителна информация

React - Пълното ръководство (включително куки, React Router, Redux)

Модерна реакция с Redux [Актуализация 2019]

Най -добрите 50 въпроса за интервю за React за разработчиците на Frontend през 2019 г.

Основи на JavaScript, преди да научите React

☞ Microfrontends - Свързване на JavaScript рамки заедно (React, Angular, Vue и т.н.)

Reactjs срещу Angularjs - кое е най -доброто за уеб разработка

☞ React + TypeScript: Защо и как

Как да напиша по -добър код в React

React Router: Добавете силата на навигация

Първи стъпки с React Router

☞ Използване на React Router за оптимизиране на React приложения

☞ Какво е DOM в JavaScript?

Angular 8 DOM заявки: Пример за ViewChild и ViewChildren

#reactjs #уеб разработка #javascript