Реал/ДОМ претраживача:

ДОМ је скраћеница за „Модел објекта документа“. То је структурирани приказ ХТМЛ-а на веб страници или апликацији. Представља цео кориснички интерфејс (Кориснички интерфејс) од веб апликација као структура података стабла.

То је структурно представљање ХТМЛ елемената веб апликације једноставним речима.

Кад год дође до било какве промене у стање корисничког интерфејса апликације, ДОМ је ажуриран и представља промену. ДОМ се приказује и манипулише са сваком променом за ажурирање корисничког интерфејса апликације, што утиче на перформансе и успорава их.

Стога, са многим компонентама корисничког интерфејса и сложеном структуром ДОМ, Ажурираће се скупље јер га треба поново приказати са сваком променом.

ДОМ је конституисан као структура података стабла. Састоји се од чвора за сваки УИ елемент присутан у веб документу.

како читати цсв датотеку у јава

Ажурирање ДОМ-а:

Ако знамо нешто о ЈаваСцрипт-у, можда ћете видети људе који користе 'гетЕлементБиИд()' или 'гетЕлементБиЦласс()' метод за измену садржаја ДОМ-а.

Кад год дође до било какве промене у стању ваше апликације, ДОМ се ажурира тако да одражава промену у корисничком интерфејсу.

Како виртуелни ДОМ убрзава ствари:

Када се у апликацију додају нове ствари, креира се виртуелни ДОМ, представљен као стабло. Сваки елемент у апликацији је чвор у стаблу.

Стога, кад год дође до промене положаја елемента, креира се нови виртуелни ДОМ. Новије виртуелно ДОМ стабло се упоређује са најновијим, где се примећују промене.

Он проналази могући начин да изврши ове промене помоћу стварног ДОМ-а. Затим би се ажурирани елементи поново приказали на страници.

Како виртуелни ДОМ помаже у реаговању:

Све у Реацт-у се посматра као компонента, функционална компонента и компонента класе. Компонента има стање. Кад год променимо нешто у ЈСКС датотеци, једноставно речено, кад год се промени стање компоненте, реакција ажурира своје виртуелно ДОМ стабло.

Реацт сваки пут одржава два виртуелна ДОМ-а. Први садржи ажурирани виртуелни ДОМ, а други је унапред ажурирана верзија ажурираног виртуелног ДОМ-а. Он упоређује унапред ажурирану верзију ажурираног виртуелног ДОМ-а и проналази шта је промењено у ДОМ-у, на пример које ће компоненте бити промењене.

Иако може изгледати неефикасно, трошак нема више, јер ажурирање виртуелног ДОМ-а не може да траје много времена.

Када упоредимо тренутно виртуелно ДОМ стабло са претходним, познато је као 'пркосећи'. Када Реацт сазна шта се променило, ажурира објекте у стварном ДОМ-у. Реацт користи пакетна ажурирања да ажурира стварни ДОМ. Промене у стварном ДОМ-у се шаљу у групама уместо да се шаљу било каква ажурирања за појединачну промену у стање компоненте.

Поновно приказивање корисничког интерфејса је најскупљи део, а Реацт успева да уради најефикасније тако што обезбеђује да Реал ДОМ прима пакетна ажурирања да поново рендерује кориснички интерфејс. Позива се процес претварања измена у стварни ДОМ помирење.

Побољшава перформансе и главни је разлог зашто програмери воле реаговање и његов виртуелни ДОМ.

Шта је Реацт-ов виртуелни ДОМ?

Концепт виртуелног ДОМ-а долази да учини перформансе реалног ДОМ-а бољим и бржим. Виртуелни ДОМ је виртуелни симбол ДОМ-а.

Али главна разлика је у томе што се сваки пут, са сваком променом, виртуелни ДОМ ажурира уместо стварног ДОМ-а.

На пример, тхе прави и виртуелни ДОМ је представљен као а структура дрвета. Сваки елемент у стаблу је чвор. А чвор се додаје стаблу када се дода нова ставка корисничком интерфејсу апликације.

Ако се положај било ког елемента промени, а Нова виртуелно ДОМ стабло је креирано. Виртуелни ДОМ израчунава минимални број операција на правом ДОМ-у да бисте извршили измене у правом ДОМ-у. Ефикасан је и ради боље смањењем трошкова и операција поновног приказивања целог стварног ДОМ-а.

Сада имамо нормално разумевање стварног и виртуелног ДОМ-а.

Погледајмо како Реаговати ради коришћењем Виртуелни ДОМ.

• Сваки кориснички интерфејс је појединац саставни део, а свака компонента има своје стање.
• Реакција следи уочљиви обрасци и посматра промене стања.
• Кад год се изврши било каква промена стања компоненте, Реагујте ажурира виртуелно ДОМ стабло али не мења стварно ДОМ стабло.
• Реаговати упоређује тхе Тренутна верзија од виртуелни ДОМ са Претходна верзија после ажурирање.
• Реацт зна који су објекти промењени у виртуелни ДОМ. Замењује објекте у стварни ДОМ , доводи до минимална манипулација операције.
• Овај процес је познат као 'диференцијација'. Ова слика ће учинити концепт јасним.

На слици, тхе тамно плава круговима аре тхе чворови који су измењени. Тхе држава ових компоненти се променио. Реацт израчунава разлику између претходне и тренутне верзије виртуелно ДОМ стабло, а цело родитељско подстабло се поново приказује да би се приказао кориснички интерфејс који је промењен.

Ажурирано дрво је серија је ажурирана (да се ажурирања правог ДОМ-а шаљу у групама уместо слања ажурирања за сваку промену стања.) ​​у прави ДОМ.

Да бисмо ушли дубље у ово, морамо знати о Реаговати рендер () функција.

Затим, морамо знати о неким важним Карактеристике оф Реацт.

ЈСКС

ЈСКС означава ЈаваСцрипт КСМЛ. То је проширење синтаксе оф ЈС. Користећи ЈСКС, можемо писати ХТМЛ структуре у датотеци која садржи ЈаваСцрипт код.

Компоненте

Компоненте су независни и вишекратну употребу кода. Сваки кориснички интерфејс у ​​апликацији Реацт је компонента. Једна апликација има много компоненте.

Компоненте су две врсте, компоненте класе и функционалне компоненте.

Компоненте класе имају стање јер користе своје 'стање' за промену корисничког интерфејса. Функционалне компоненте су компоненте без стања. Они се понашају као ЈаваСцрипт функција која узима произвољан параметар који се зове 'пропс'.

Реацт Хоокс уведени су у приступ државама са функционалним компонентама.

Методе животног циклуса

Методе животног циклуса су важне методе уграђени да реагују, које делују на компоненте кроз њихово трајање у ДОМ-у. Свака компонента Реацт-а пролази кроз животни циклус догађаја.

Метода рендер() је максимално коришћена метода животног циклуса .

То је једини метод изнутра Компоненте класе Реацт . Дакле, у свакој класи се позива компонента рендер().

Метода рендер (). управља приказивањем компоненте од стране корисничког интерфејса. Рендер () садржи сву логику приказану на екрану. Такође може имати а нула вредност ако не желимо да прикажемо ништа на екрану.

Пример је приказан испод:

преордер траверсал

 class Header extends React.Component{ render(){ return React Introduction } } 

Пример ће показати ЈСКС написано у рендер().

Када држава или проп се ажурира у оквиру компоненте, дати, пружити() ће вратити другачије стабло Реацт елемената.

Када пишете код у конзолу или ЈаваСцрипт датотеку, десиће се следеће:

• Прегледач анализира ХТМЛ да би пронашао чвор са ИД-ом.
• Уклања подређени елемент елемента.
• Ажурира елемент (ДОМ) са 'ажурирана вредност'.
• Прерачунава се ЦСС за родитељске и подређене чворове.
• Затим, ажурирајте изглед.

На крају, пређите кроз дрво на екрану.

Дакле, као што знамо да ажурирање ДОМ подразумева промену садржаја. Више је везано за то.

Сложени алгоритми су укључени у поновно израчунавање ЦСС-а и промену изгледа, што утиче на перформансе.

Дакле, Реацт има много начина да се носи са тим, јер користи нешто познато као виртуелни ДОМ.

реацтдоме

Пакет реацт-дом обезбеђује методе специфичне за ДОМ на највишем нивоу апликације за излаз из Реацт модела ако је потребно.

 import * as ReactDOM from 'react-dom'; 

Ако користите ЕС5 са нпм-ом, требало би да напишете и:

 var ReactDOM = require('react-dom'); 

Тхе реаговати-дом пакет такође пружа модуле специфичне за клијентске и серверске апликације:

• реаговати-дом/клијент
• реаговати-дом/сервер

Реацт-дом пакет извози ових метода:

• цреатеПортал()
• флусхСинц()

Реацт-дом методе се такође извозе:

• дати, пружити ()
• хидратизовати ()
• финдДОМНоде()
• унмоунтЦомпонентАтНоде ()

Напомена: И хидратација и рендер замењени су новијим клијентским методама.

Подршка претраживача

Реацт подржава све модерне претраживаче, а неки полифили су потребни за старије верзије.

Напомена: Не можемо да подржимо старије прегледаче који не подржавају ЕС5 методе, као, Интернет Екплорер. Можете открити да апликације функционишу у најновијим прегледачима ако полифиле као што су ес5-схим и ес5-схам које су укључене у страницу, али сте сами ако кренете путем.

Референца

цреатеПортал()

Креира портал () Портал обезбеђује начин читања деце у ДОМ чвор, који постоји изван рангирања ДОМ компоненте.

флусхСинц()

Присилите Реацт ажурирања у обезбеђеном повратном позиву истовремено. Осигурава да се ДОМ одмах ажурира.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Белешка:

• Користите штедљиво. Флусх Синц значајно утиче на перформансе.
• ФлусхСинц ће приморати границе на чекању да покажу резервно стање.
• Покреће ефекте на чекању и истовремено примењује ажурирања пре него што их врати.
• флусхСинц флусх ажурира изван повратног позива да испразни ажурирања повратног позива. На пример, ако постоје ажурирања на чекању од клика, Реацт може да их испразни пре него што испразни ажурирања у повратном позиву.

Легаци Референце

дати, пружити()

 render(element, container[, callback]) 

Напомена: Рендер је замењен креирањем Роот-а у Реацт-у. Рендер Реацт елемент у ДОМ у испорученом контејнеру и врати референцу на компоненту.

Ако је Реацт елемент претходно рендерован у било који контејнер, он би извршио ажурирање на њему и неопходно је да одражава најновији Реацт елемент.

Извршава се када се компонента прикаже ако је обезбеђен опциони повратни позив.

Белешка:

Рендер () метода контролише садржај чвора контејнера када прође. Било који постојећи ДОМ елемент је замењен.

Рендер () не мења чвор контејнера (може само да модификује потомке контејнера). Можда је могуће уметнути компоненту у постојећи ДОМ чвор без преписивања подређених елемената.

Рендер () тренутно враћа референцу на основну инстанцу РеацтЦомпонент-а.

странице јава сервера

Међутим, његова повратна вредност је наслеђена и може се избећи јер, у неким случајевима, будуће верзије Реацт-а могу генерисати компоненте асинхроно.

Ако вам је потребна референца на прототип РеацтЦомпонент, најбоље решење је да елементу приложите референцу за опозив.

Рендер () се користи за хидратацију рендерованог контејнера на серверу је застарео. Користите хидратеРоот() уместо њега.

хидратизовати()

хидрат се замењује кореном хидрата.

То је тачно као рендер(), али се користи за контејнер чији ХТМЛ садржај рендерује РеацтДОМСервер. Реацт ће покушати да повеже слушаоце догађаја са тренутном ознаком.

 hydrate(element, container[, callback]) 

Белешка:

Реацт очекује да ће приказани садржај бити идентичан између сервера и клијента. Можемо да исправимо садржај текста, али недоследности морамо третирати као грешке и исправити их. У режиму развоја, Реацт упозорава на недоследност током хидратације.

Не постоји гаранција да се специфичне разлике исправљају због одступања.

То је важно из разлога перформанси у већини апликација и биће прескупо да се провере све ознаке.

Претпоставимо да се атрибут елемента или садржај текста неизбежно разликују између сервера и клијента (на пример, временску ознаку ). У овом случају можемо да утишамо упозорење додавањем суппрессХидратионВарнинг = {труе} до елемента.

Ако то није текстуални елемент, не може покушати да га закрпи тако да може остати недоследан до будућих ажурирања.

Можете да извршите рендеровање у два пролаза ако намерно треба да обезбедимо другачије на серверу и клијенту. Компоненте остављене на клијенту могу читати променљиве стања као што је тхис.стате.исЦлиент, где ће се поставити на труе у цомпонентДидМоунт().

Почетни пролаз за рендеровање ће радити исто као и сервер, избегавајући недоследности, али ће додатни пролаз бити направљен синхроно након хидратације.

Напомена: Овај приступ ће учинити компоненте споријим јер то раде два пута, па га пажљиво користите.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Белешка:

унмоунтЦомпонентАтНоде је замењен са роот.унмоунт() у Реацт-у. Брише монтирану Реацт компоненту из ДОМ-а и чисти њене руковаоце догађајима и стање.

Ако ниједна компонента није монтирана на контејнер, не може ништа да уради. Враћа тачно ако ниједна компонента није монтирана и нетачно ако нема компоненте за демонтажу.

финдДОМНоде()

Напомена: финдДОМНоде је излазни отвор који се користи за приступ основном ДОМ чвору. Овај излазни отвор се у већини случајева обесхрабрује јер пробија апстракцију компоненте. Застарео је у СтрицтМоде-у.

финдДОМНоде(компонента)

Ако је ова компонента монтирана на ДОМ, ово враћа одговарајући изворни ДОМ елемент претраживача. Овај метод је користан за читање вредности из ДОМ-а, као што су вредности поља обрасца, и извођење ДОМ мерења. У већини случајева можете приложити референцу на ДОМ чвор и избегавати коришћење финдДОМНоде.

Када компонента врати нулл или фалсе, финдДОМНоде враћа нулл. Када се компонента прикаже у стрингу, финдДОМНоде враћа текстуални ДОМ чвор који садржи ту вредност. Компонента може да врати фрагмент са више деце у случају да је финдДОМНоде вратио ДОМ чвор који одговара првом непразном детету.

Белешка:

финдДОМНоде ради само на монтираним компонентама (тј. компонентама које су постављене у ДОМ). Ако покушате да позовете ово на компоненти која још увек није монтирана (као што је позивање финдДОМНоде() на рендер() на компоненти која још није креирана), биће избачен изузетак.

финдДОМНоде се не може користити у компонентама функције.

ДОМ елементи

Реацт имплементира ДОМ систем независан од претраживача за перформансе и компатибилност са више претраживача. Користимо ову прилику да почистимо неке од грубих ивица у имплементацији ДОМ-а у претраживачу.

У Реацт-у, сва својства и атрибути ДОМ-а (укључујући руковаоце догађајима) морају да буду у облику слова. На пример, ХТМЛ атрибут табиндек одговара атрибуту индекс табулатора у Реацт-у.

амплитудна модулација

Изузетак су атрибути ариа-* и дата-*, који морају бити малим словима. На пример, можете имати ознаку подручја као ознаку подручја.

Разлике у атрибутима

Неколико атрибута ће радити другачије између Реацт-а и ХТМЛ-а:

проверено

Означени атрибут је подржан компонентама поља за потврду или радија типа . Користан је за производњу контролисаних компоненти. Ово можете користити да одредите да ли је компонента проверена или не.

ДефаултЦхецкед је непроверени пандан који одређује да је компонента проверена први пут када се монтира.

Назив класе

Да бисте навели ЦСС класу, користите атрибут цлассНаме. Примјењује се на све регуларне ДОМ и СВГ елементе као што су , , итд.

Ако користите Реацт витх Веб Цомпонентс (неуобичајено), уместо тога користите атрибут цласс.

опасноСетИннерХТМЛ

Дангероусли СетИннерХТМЛ је Реацт-ова замена за коришћење иннерХТМЛ-а у ДОМ претраживачу. Конфигурисање ХТМЛ кода је ризично јер је лако изложити кориснике нападу скриптовања на више локација (КССС).

Дакле, можемо да поставимо ХТМЛ директно из Реацт-а, али морате опасно да откуцате СетИннерХТМЛ и проследите објекат са кључем __хтмл да бисте запамтили да је опасан.

На пример:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

Реацт елементи уместо тога користе хтмлФор, пошто је фор резервисана реч у ЈаваСцрипт-у.

онЦханге

Догађај онЦханге се понаша према очекивањима; догађај се покреће сваки пут када се промени поље обрасца.

Намерно не користимо постојеће понашање претраживача јер је промена велика за његово понашање и Реацт се ослања на догађај да обрађује унос корисника у реалном времену.

изабрани

Ако желите да означите као изабрано, уместо тога погледајте вредност те опције у вредности '. Погледајте „Изаберите ознаку“ за детаљна упутства.

Белешка:

У максималним случајевима, називи класа се односе на класе дефинисане у екстерном ЦСС стилу. Стилови се користе у Реацт апликацијама за додавање израчунатих стилова у време рендеровања. Атрибут стиле прихвата ЈаваСцрипт објекат са својствима камила уместо ЦСС стринга.

Усклађује се ДОМ-стил ЈаваСцрипт својства, ефикаснији је и избегава КССС сигурносне рупе.

На пример:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Имајте на уму да: стилови немају аутоматски префикс. Да бисмо подржали старије прегледаче, морамо да обезбедимо својства стила:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Типке стила су камиле које одговарају приступу својствима на ДОМ чворовима из ЈС-а. Префикси добављача МС почињу великим словом.

Реацт ће аутоматски додати 'пк' суфикс неким својствима инлине стила бројева. Ако желимо да користимо јединице које нису 'пк', наведите вредност као стринг са жељеном јединицом.

на пример:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Међутим, нису сва својства стила конвертована у низове пиксела.

Поништи упозорење о садржају који се може уређивати

Постоји упозорење ако је елемент за децу означен као садржај који може да се мења, јер неће радити. Атрибут потискује упозорење.

Упозорење о сузбијању

Ако користимо Реацт рендеровање на страни сервера, то је упозорење када сервер и клијент рендерују са различитим садржајем. Међутим, у ретким случајевима тешко је гарантовати тачно подударање. На пример, очекује се да се временске ознаке разликују на серверу или клијенту.

Ако подесите упозорење о потискивању на тачно, оно неће упозоравати на неподударности између атрибута и садржаја елемента.

Радило је само на дубини једног нивоа и требало је да се користи као бекство.

вредност

Атрибут валуе је дизајниран помоћу компоненти и. Можете га користити за подешавање вредности компоненте.

Користан је за производњу контролисаних компоненти. дефаултВалуе и једнака необележеном постављају вредност компоненте када се серијски монтира.

Сви подржани ХТМЛ атрибути

Подржани су сви прилагођени и стандардни ДОМ атрибути.

Реацт је обезбедио ЈаваСцрипт-центричан АПИ у ДОМ-у. А Реацт компоненте често садрже прилагођене и ДОМ повезане прописе, а затим Реацт користи исте конвенције ЦамелЦасе као ДОМ АПИ:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API