Clever Geek Handbook

A little about how the virtual DOM works in React

image







Real or real DOM



DOM



stands for Document Object Model



(Document Object Model). In simple terms, the DOM is the representation of the user interface (UI) in an application. Whenever the UI changes, the DOM is also updated to reflect those changes. Frequent manipulation of the DOM has a negative impact on performance.







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) () , :













  2. 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% !













More articles:


All Articles