Echtes oder echtes DOM
DOM
steht für Document Object Model
(Document Object Model). In einfachen Worten ist das DOM die Darstellung der Benutzeroberfläche in einer Anwendung. Wenn sich die Benutzeroberfläche ändert, wird auch das DOM aktualisiert, um diese Änderungen widerzuspiegeln. Häufige DOM-Manipulationen wirken sich negativ auf die Leistung aus.
DOM ?
DOM . DOM . ( ) () UI . — . , UI, DOM.
DOM . , JavaScript-. , JavaScript- DOM , .
, 10 . . . 10 , ! 1 , 9 .
— , - DOM. . React (virtual) DOM (VDOM).
DOM
React DOM ( — RDOM) VDOM. VDOM — RDOM, . VDOM , RDOM, , .
DOM (VDOM) — , «» UI «» DOM, , ReactDOM. (reconcilation).
RDOM . VDOM , () . VDOM ( ) .
VDOM ?
UI , VDOM . . , . (diffed) .
RDOM. , RDOM. , , RDOM.
DOM- .
, . UI, . DOM-. UI. , RDOM.
React VDOM?
, , VDOM, , React.
1. React «» (observer)
React UI (state). , React VDOM. VDOM, React . « » (diffing).
, VDOM, React RDOM. DOM. React JavaScript.
2. React (batch) RDOM
. (, ) .
UI — , React RDOM.
3. React
React O(n) () , :
key
()
.
, React . .
, React
DOM.
componentWillUnmount()
. , DOM DOM.UNSAFE_componentWillMount()
,componentDidMount()
. , ,
, , , . , :
<div> <Counter /> </div> <span> <Counter /> </span>
Counter
.
, React «» . DOM , . :
<div className="before" title="stuff" /> <div className="after" title="stuff" />
className
.
DOM, React .
React DOM- .
, , :
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
React "", <li></li>
<li></li>
, <li></li>
.
, . , :
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
React , <li></li>
<li></li>
.
React () key
. , React . , :
<ul>
<li key="1"></li>
<li key="2"></li>
</ul>
<ul>
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</ul>
React , 0
, 1
2
.
, , :
<li key={item.id}>{item.name}</li>
, - . , .
, . , . .
. . , . , , , .
: « React, UI, DOM . , , , , , DOM».
React. , — , React. .
« DOM» — , , . React « DOM», , React-, , . , React , «» (fibers). . Fiber
— , React 16. VDOM.
VDOM?
« DOM» (). , VDOM — JavaScript-.
, DOM-:
:
const vdom = { tagName: 'html', children: [ { tagName: 'head' }, { tagName: 'body', children: [ { tagName: 'ul', attributes: { class: 'list' }, children: [ { tagName: 'li', attributes: { class: 'list_item' }, textContent: ' ', }, // li ], }, // ul ], }, // body ], } // html
VDOM. RDOM, HTML- (). , , , RDOM .
, . , list
, :
const list = { tagName: 'ul', attributes: { class: 'list' }, children: [ { tagName: 'li', attributes: { class: 'list_item' }, textContent: ' ', }, ], }
VDOM
, VDOM .
, VDOM , DOM. , DOM API.
, VDOM , . DOM API, .
const copy = { tagName: 'ul', attributes: { class: 'list' }, children: [ { tagName: 'li', attributes: { class: 'list_item' }, textContent: ' ', }, { tagName: 'li', attributes: { class: 'list_item' }, textContent: ' ', }, ], }
«» (diff) VDOM (list
) . Diff
:
const diffs = [ { newNode: { /* */ }, oldNode: { /* */ }, index: { /* */ }, }, { newNode: { /* */ }, index: { /* ... */ }, }, ]
diff
RDOM. DOM .
, , :
const domElement = document.quesrySelector('list') diffs.forEach((diff) => { const newElement = document.createElement(diff.newNode.tagName) /* ... */ if (diff.oldNode) { // , domElement.replaceChild(diff.newNode, diff.oldNode) } else { // , domElement.append(diff.newNode) } })
, , VDOM.
VDOM
, VDOM .
VDOM , React Vue DOM. , React list
:
import React from 'react' import ReactDOM from 'react-dom' const list = React.createElement( 'ul', { className: 'list' }, React.createElement('li', { className: 'list_item' }, ' ') ) // React «JSX» // const list = <ul className="list"><li className="list_item"> </li></ul> ReactDOM.render(list, document.body)
ReactDOM.render()
:
const newList = React.createElement( 'ul', { className: 'list' }, React.createElement( 'li', { className: 'list_item' }, ' ' ), React.createElement('li', { className: 'list_item' }, ' ') ) const timerId = setTimeout(() => { ReactDOM.render(newList, document.body) clearTimeout(timerId) }, 5000)
React VDOM, , , .
VDOM, , . DOM-, , DOM. , -.
, Angular
, , (single page applications, SPA) , Dirty Model Checking
( ). , DMC VDOM . MVC- . React , React — , , (view).
VDS .
10% !
