Реален/браузър DOM:

DOM означава „Обектен модел на документ“. Това е структурирано представяне на HTML в уеб страницата или приложението. Той представлява целия потребителски интерфейс (Потребителски интерфейс) от уеб приложение като дървовидна структура от данни.

Това е структурно представяне на HTML елементи на уеб приложение с прости думи.

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

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

DOM е съставен като дървовидна структура от данни. Състои се от възела за всеки UI елемент присъства в уеб документа.

година е изобретен компютърът

Актуализиране на DOM:

Ако знаем нещо за JavaScript, може да видите хора, които използват 'getElementById()' или 'getElementByClass()' метод за модифициране на съдържанието на DOM.

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

Как Virtual DOM ускорява нещата:

Когато се добавят нови неща към приложението, се създава виртуален DOM, представен като дърво. Всеки елемент в приложението е възел в дървото.

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

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

Как виртуалният DOM помага в React:

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

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

Въпреки че може да изглежда неефективно, цената вече не е, тъй като актуализирането на виртуалния DOM не може да отнеме много време.

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

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

Той подобрява производителността и е основната причина, поради която разработчиците обичат React и неговия Virtual DOM.

Какво представлява виртуалният DOM на React?

Концепцията за Virtual DOM идва, за да направи производителността на Real DOM по-добра и по-бърза. Виртуалният DOM е виртуален символ на DOM.

Но основната разлика е, че всеки път, с всяка промяна, виртуалният DOM се актуализира вместо действителния DOM.

Например, на истински и виртуален DOM е представен като a дървовидна структура. Всеки елемент в дървото е възел. А възел се добавя към дървото, когато се добави нов елемент към потребителския интерфейс на приложението.

Ако позицията на някои елементи се промени, a нов създава се виртуално DOM дърво. Виртуалният DOM изчислява минималния брой операции върху истинския DOM, за да направите промени в истинския DOM. Той е ефективен и работи по-добре, като намалява разходите и операциите по повторно изобразяване на целия реален DOM.

Сега имаме нормално разбиране за реалния и виртуалния DOM.

Нека да видим как Реагирайте работи чрез използване Виртуален DOM.

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

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

Актуализираното дърво е актуализирана партида (че актуализациите на реалния DOM се изпращат на партиди, вместо да се изпращат актуализации за всяка промяна на състоянието.) към истинския DOM.

За да навлезем по-дълбоко в това, трябва да знаем за Реагиране на изобразяване () функция.

Тогава трябва да знаем за някои от важните неща Характеристика на React.

JSX

JSX означава JavaScript XML. Това е разширение на синтаксиса на JS. Използвайки JSX, можем да пишем HTML структури във файла, който съдържа JavaScript код.

Компоненти

Компонентите са независима и за многократна употреба на код. Всеки потребителски интерфейс в приложението React е компонент. Едно приложение има много компоненти.

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

Компонентите на класа са със състояние, защото използват своето „състояние“, за да променят потребителския интерфейс. Функционалните компоненти са компоненти без състояние. Те действат като JavaScript функция, която приема произволен параметър, наречен „props“.

Реагирайте куките са въведени за достъп до състояния с функционални компоненти.

низ към int в java

Методи на жизнения цикъл

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

Методът render() е максимално използван метод на жизнения цикъл .

Това е единственият метод вътре Компоненти на клас React . И така, във всеки клас се извиква компонент render().

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

Примерът е показан по-долу:

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

Примерът ще покаже JSX написана в render().

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

Когато пишете кода в конзолата или JavaScript файла, това ще се случи:

• Браузърът анализира HTML, за да намери възела с идентификатора.
• Той премахва дъщерния елемент на елемента.
• Актуализира елемента (DOM) с „актуализирана стойност“.
• Преизчислява CSS за родителски и дъщерни възли.
• След това актуализирайте оформлението.

Накрая прекосете дървото на екрана.

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

В преизчисляването на CSS и промяната на оформленията участват сложни алгоритми, които влияят на производителността.

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

реагира купол

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

 import * as ReactDOM from 'react-dom'; 

Ако използвате ES5 с npm, трябва също да напишете:

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

The реагира-дом пакетът също така предоставя модули, специфични за клиентските и сървърните приложения:

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

Пакетът react-dom експортира тези методи:

• createPortal()
• flushSync()

Методите на реакцията също се експортират:

• изобразявам ()
• хидратирам ()
• findDOMNode()
• демонтиранеComponentAtNode ()

Забележка: И хидратирането, и рендирането са заменени с по-нови клиентски методи.

Поддръжка на браузър

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

Забележка: Не можем да поддържаме по-стари браузъри, които не поддържат ES5 методи, като Internet Explorer. Можете да откриете, че приложенията работят в най-новите браузъри, ако полифили като es5-shim и es5-sham, включени в страницата, но вие сте сами, ако поемете по пътя.

справка

createPortal()

Създава портал () Порталът предоставя начин за четене на деца в DOM възела, който съществува извън класирането на DOM компонента.

flushSync()

Принудителното реагиране се актуализира едновременно в предоставеното обратно извикване. Той гарантира, че DOM се актуализира незабавно.

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

Забележка:

• Използвайте пестеливо. Flush Sync значително влоши производителността.
• FlushSync ще принуди чакащите граници да покажат резервното състояние.
• Той изпълнява чакащи ефекти и едновременно с това прилага актуализациите, преди да го върне.
• flushSync флъш актуализации извън обратното извикване, за да изчисти актуализациите на обратното извикване. Например, ако има чакащи актуализации от щракване, React може да ги изтрие, преди да изтрие актуализациите при обратното извикване.

Справка за наследство

render()

 render(element, container[, callback]) 

Забележка: Render се заменя със създаване на Root в React. Изобразете React елемент в DOM в предоставения контейнер и изплатете препратка към компонента.

Ако React елемент е бил изобразен преди това в който и да е контейнер, той ще извърши актуализация върху него и е необходимо да се отрази най-новият React елемент.

Изпълнява се, когато компонентът се визуализира, ако е предоставено незадължителното обратно извикване.

Забележка:

Методът Render () контролира съдържанието на възела на контейнера, когато той преминава. Всеки съществуващ DOM елемент се заменя.

Render () не променя възела на контейнера (той може да променя само децата на контейнера). Може да е възможно да вмъкнете компонент в съществуващ DOM възел, без да презаписвате дъщерните елементи.

Render () понастоящем обратна препратка към основния екземпляр на ReactComponent.

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

Ако имате нужда от препратка към прототипа на ReactComponent, най-доброто решение е да прикачите препратка към елемента.

Render () се използва за хидратиране на изобразен контейнер към сървъра е остарял. Използвайте hydrateRoot() на мястото на него.

хидратирам()

хидратът се заменя с хидратния корен.

Той е точно като render(), но се използва за контейнер, чието HTML съдържание се изобразява от ReactDOMServer. React ще се опита да свърже слушателите на събития с текущото маркиране.

 hydrate(element, container[, callback]) 

Забележка:

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

Няма гаранция, че специфичните разлики се коригират за несъответствия.

Това е важно от съображения за производителност в повечето приложения и ще бъде твърде скъпо да се валидират всички флагове.

Да предположим, че атрибутът на елемент или текстовото съдържание неизбежно се различава между сървъра и клиента (например, клеймото за време ). В този случай можем да заглушим предупреждението, като добавим suppressHydrationWarning = {true} към елемента.

Ако това не е текстов елемент, той не може да се опита да го коригира, така че да остане непоследователен до бъдещи актуализации.

Можете да извършите рендиране с два преминавания, ако трябва умишлено да предоставим различни на сървъра и клиента. Компонентите, оставени на клиента, могат да четат променливи на състоянието като this.state.isClient, където ще се зададе на true в componentDidMount().

как да превърнете низ в int

Първоначалното преминаване на рендиране ще направи същото като сървъра, избягвайки несъответствия, но допълнителното преминаване ще бъде направено синхронно след хидратиране.

Забележка: Този подход ще направи компонентите по-бавни, тъй като те го правят два пъти, така че го използвайте внимателно.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Забележка:

демонтиране на ComponentAtNode е заменен с root.unmount() в React. Той изтрива монтирания React компонент от DOM и почиства неговите манипулатори на събития и състояние.

Ако към контейнера не е монтиран компонент, той не може да направи нищо. Връща true, ако няма монтиран компонент и false, ако няма компонент за демонтиране.

findDOMNode()

Забележка: findDOMNode е спасителен люк, използван за достъп до основния DOM възел. Този авариен люк не се препоръчва в повечето случаи, защото пробива абстракцията на компонента. Той е отхвърлен в StrictMode.

findDOMNode(компонент)

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

Когато даден компонент върне null или false, findDOMNode връща null. Когато даден компонент се визуализира в низ, findDOMNode връща текстов DOM възел, съдържащ тази стойност. Компонентът може да върне фрагмент с множество деца, в случай че findDOMNode е върнал DOM възела, съответстващ на първото непразно дете.

Забележка:

findDOMNode работи само върху монтирани компоненти (тоест компоненти, които са поставени в DOM). Ако се опитате да извикате това на компонент, който все още не е монтиран (като извикване на findDOMNode() на render() на компонент, който все още не е създаден), ще бъде хвърлено изключение.

findDOMNode не може да се използва във функционални компоненти.

DOM елементи

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

В React всички свойства и атрибути на DOM (включително манипулатори на събития) трябва да са camelcase. Например атрибутът HTML tabindex съответства на атрибута tab Index в React.

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

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

Няколко атрибута ще работят по различен начин между React и HTML:

проверено

Атрибутът checked се поддържа от компоненти на поле за отметка или радио от тип. Полезно е за производство на контролирани компоненти. Можете да използвате това, за да определите дали компонентът е отметнат или не.

DefaultChecked е непровереният аналог, който определя, че компонентът е проверен при първото му монтиране.

className

За да посочите CSS класа, използвайте атрибута className. Прилага се за всички обикновени DOM и SVG елементи като, и т.н.

Ако използвате React с уеб компоненти (необичайно), вместо това използвайте атрибута клас.

opasnoSetInnerHTML

Dangerously SetInnerHTML е заместител на React за използване на innerHTML в DOM браузъра. Конфигурирането на HTML код е рисковано, защото е лесно да изложите потребителите на атака със скриптове между сайтове (XSS).

Така че можем да зададем HTML директно от React, но трябва опасно да въведете SetInnerHTML и да подадете обект с ключа __html, за да запомните, че е опасно.

Например:

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

React елементите използват htmlFor вместо това, тъй като for е запазена дума в JavaScript.

onChange

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

Ние умишлено не използваме съществуващото поведение на браузъра, защото промяната е грандиозна за поведението си и React разчита на събитието, за да се справи с въвеждането на потребителя в реално време.

избрани

Ако искате да маркирате като избрано, вместо това се обърнете към стойността на тази опция в стойността на . Вижте „Избор на етикет“ за подробни инструкции.

Забележка:

В повечето случаи имената на класовете се отнасят до класове, дефинирани във външен CSS стилов лист. Стиловете се използват в приложенията на React за добавяне на изчислени стилове по време на рендиране. Атрибутът style приема JavaScript обекта с камилски свойства вместо CSS низ.

Съответства DOM стил JavaScript свойства, е по-ефективен и избягва XSS дупки за сигурност.

Например:

 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 ; } 

Ключовете за стил са камилски, за да съответстват на достъп до свойства на DOM възли от JS. Префиксите на доставчика MS започват с главна буква.

js замяна

React автоматично ще добави суфикс 'px' към някои вградени стилови свойства на номера. Ако искаме да използваме единици, различни от 'px', посочете стойността като низ с желаната единица.

например:

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

Въпреки това, не всички стилови свойства се преобразуват в пикселни низове.

Потискане на предупреждението за редактируемо съдържание

Има предупреждение, ако елемент за деца е маркиран като редактируемо съдържание, тъй като няма да работи. Атрибутът потиска предупреждението.

Предупреждение за потискане

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

Ако зададете предупреждението за потискане на true, то няма да предупреждава за несъответствия между атрибутите и съдържанието на елемента.

Работеше само на едно ниво на дълбочина и беше предназначено да се използва като бягство.

стойност

Атрибутът стойност е проектиран от компонентите , и . Можете да го използвате, за да зададете стойността на компонента.

Полезно е за производство на контролирани компоненти. defaultValue и равно на немаркирани задават стойността на компонента, когато се монтира серийно.

Всички поддържани HTML атрибути

Поддържат се всеки персонализиран и стандартен DOM атрибут.

React предостави ориентиран към JavaScript API в DOM. Компонентите на React често съдържат персонализирани и свързани с DOM подпори и след това React използва същите конвенции на CamelCase като DOM API:

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