Real/Browser DOM:
DOM означає «Об'єктна модель документа». Це структуроване представлення HTML на веб-сторінці чи в додатку. Він представляє весь інтерфейс користувача (Інтерфейс користувача) з веб-програма як структура даних дерева.
Це структурне представлення елементів HTML веб-програми простими словами.
Щоразу, коли відбуваються будь-які зміни в стан інтерфейсу користувача програми, DOM оновлюється та представляє зміни. DOM візуалізується та маніпулюється з кожною зміною для оновлення інтерфейсу користувача програми, що впливає на продуктивність і сповільнює її.
Тому з багатьма компонентами інтерфейсу користувача та складною структурою DOM, Він оновлюватиметься дорожче, оскільки його потрібно буде повторно візуалізувати з кожною зміною.
DOM створюється як деревовидна структура даних. Він складається з вузла для кожного елемент інтерфейсу користувача у веб-документі.
конвертувати масив байтів у рядок
Оновлення 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'.
Хуки React були введені для доступу до станів із функціональними компонентами.
Методи життєвого циклу
Методи життєвого циклу важливі методи вбудований реагувати, які впливають на компоненти через їхню тривалість у DOM. Кожен компонент React проходив життєвий цикл подій.
Максимально використовується метод render(). метод життєвого циклу .
Це єдиний метод всередині Компоненти класу React . Отже, у кожному класі викликається компонент render().
Метод render (). обробляє візуалізацію компонента за допомогою інтерфейсу користувача. Render () містить усю логіку, що відображається на екрані. Він також може мати a нуль значення, якщо ми не хочемо нічого показувати на дисплеї.
Приклад показано нижче:
class Header extends React.Component{ render(){ return React Introduction } } Приклад покаже JSX записаний у render().
генератор випадкових значень в java
Коли a стан або опора оновлюється в межах компонента, render() поверне інше дерево елементів React.
Під час написання коду в консолі або у файлі JavaScript відбувається таке:
- Браузер аналізує HTML, щоб знайти вузол з ідентифікатором.
- Він видаляє дочірній елемент елемента.
- Оновлює елемент (DOM) з 'оновлене значення'.
- Він перераховує CSS для батьківських і дочірніх вузлів.
- Потім оновіть макет.
Нарешті, перейдіть по дереву на екрані.
Отже, як ми знаємо, що оновлення DOM передбачає зміну змісту. До нього більше прив’язується.
У перерахунку CSS і зміні макетів задіяні складні алгоритми, що впливає на продуктивність.
Отже, React має багато способів впоратися з цим, оскільки він використовує щось, відоме як віртуальний DOM.
reactdome
Пакет react-dom надає специфічні для DOM методи на верхньому рівні програми для виходу маршруту з моделі React, якщо це необхідно.
import * as ReactDOM from 'react-dom';
Якщо ви використовуєте ES5 з npm, ви також повинні написати:
var ReactDOM = require('react-dom');
The реагувати-дом пакет також містить модулі, специфічні для клієнтських і серверних програм:
- реагувати-дом/клієнт
- реагувати-дом/сервер
Пакунок react-dom експортує ці методи:
- createPortal()
- flushSync()
Методи react-dom також експортуються:
- рендер ()
- гідрат ()
- findDOMNode()
- unmountComponentAtNode ()
Примітка: як hydrate, так і render було замінено на новіші клієнтські методи.
Підтримка браузера
React підтримує всі сучасні браузери, а для старіших версій потрібні деякі полізаповнення.
Примітка. Ми не підтримуємо старіші браузери, які не підтримують методи ES5, наприклад Internet Explorer. Ви можете виявити, що програми працюють у найновіших браузерах, якщо полізаповнювачі, як-от es5-shim і es5-sham, включені на сторінку, але ви самі, якщо виберете шлях.
довідка
createPortal()
Створює портал () Портал забезпечує спосіб читання дочірніх елементів у вузол DOM, який існує поза рейтингом компонента DOM.
flushSync()
Одночасне оновлення React у наданому зворотному виклику. Це забезпечує негайне оновлення 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().
Початковий прохід візуалізації виконуватиме те саме, що й сервер, уникаючи невідповідностей, але додатковий прохід буде виконано синхронно після гідратації.
Примітка. Цей підхід зробить компоненти повільнішими, оскільки вони роблять це двічі, тому використовуйте його обережно.
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. Наприклад, атрибут tabindex HTML відповідає атрибуту tab Index у React.
Винятком є атрибути aria-* і data-*, які мають бути малими літерами. Наприклад, ви можете мати тег області як тег області.
Відмінності в атрибутах
Кілька атрибутів працюватимуть по-різному між React і HTML:
рядок додати
перевірено
Атрибут checked підтримується компонентами прапорця або радіо типу . Це корисно для виробництва контрольованих компонентів. Ви можете використовувати це, щоб визначити, чи перевірено компонент чи ні.
DefaultChecked — це неперевірений аналог, який визначає, що компонент перевірено під час першого монтування.
className
Щоб указати клас CSS, використовуйте атрибут className. Це стосується всіх звичайних елементів DOM і SVG, таких як, і т.д.
Якщо ви використовуєте React з веб-компонентами (рідко), використовуйте натомість атрибут class.
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 із властивостями Camel замість рядка 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 починаються з великої літери.
React автоматично додасть суфікс «px» до деяких вбудованих властивостей стилю чисел. Якщо ми хочемо використовувати одиниці, відмінні від 'px', вкажіть значення у вигляді рядка з потрібною одиницею.
наприклад:
// Result style: '10px' Hello World! // Result style: '10%' Hello World!
Однак не всі властивості стилю перетворюються на рядки пікселів.
Вимкнути оповіщення про вміст, який можна редагувати
Існує попередження, якщо елемент для дочірніх елементів позначено як вміст, доступний для редагування, оскільки це не працюватиме. Атрибут пригнічує попередження.
Попередження про придушення
Якщо ми використовуємо рендеринг React на стороні сервера, це попередження, коли сервер і клієнт рендерять різний вміст. Однак у рідкісних випадках важко гарантувати точну відповідність. Наприклад, очікується, що мітки часу відрізнятимуться на сервері чи клієнті.
Якщо ви встановите для попередження про припинення значення true, воно не попереджатиме про невідповідності між атрибутами та вмістом елемента.
Він працював лише на глибині одного рівня та мав використовуватися як вихід.
значення
Атрибут значення розроблено компонентами , і . Ви можете використовувати його для встановлення значення компонента.
Це корисно для виробництва контрольованих компонентів. defaultValue і дорівнює не позначеному встановлює значення компонента при послідовному монтуванні.
Усі підтримувані атрибути HTML
Підтримуються будь-які спеціальні та стандартні атрибути DOM.
React надав у DOM API, орієнтований на JavaScript. Компоненти React часто містять користувальницькі та пов’язані з DOM властивості, а потім React використовує ті самі конвенції CamelCase, що й DOM API:
// Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API